将 Socket.io 与 Pinia 一起使用时出现问题

Question

我正在尝试使用 Pinia 来管理我正在构建的 Vue.js 应用程序中的某些全局状态，特别是我想在各种组件和视图之间共享一个 Socket.io 实例。但是我得到了

this.socketObject.emit is not a function

从 Socket.io 实例调用函数时出错，当我从 component/view 以外的组件调用它们时 Socket.io 实例是在其中创建的。这是代码的一些摘录.

@/views/LobbyView.vue（这是我创建 Socket.io 实例并将其传递给 Pinia 商店的地方，我可以使用 emit fine在这个文件中没有任何错误）

import io from "socket.io-client";
import { useSocket} from "@/store/index";
    ...     
setup() {
   const socketObject = useSocket();
   return { socketObject};
},
    ...
async mounted() {
   this.socketObject = await io("http://localhost:8000");
   this.socketObject.emit("createNewRoom");
}

@/store/index.js Pinia store

import { defineStore } from "pinia";
...
export const useSocket = defineStore({
  id: "socket",
  state: () => {
    return {socketObject: Object};
  },
  getters: {},
  actions: {},
});

@/components/lobbySettings（这是我在通过我的 Pinia 商店使用 Socket.io 时遇到问题的文件）

import { useSocket } from "@/store/index";
...
  setup() {
    const socketObject = useSocket();
    return { socketObject};
  },

...
  methods: {
    startGame() {
        this.socketObject.emit("updateRoom", this.roomInfo);
    },
  },

当按下按钮时调用开始游戏方法时，如果我发现错误，我会得到

this.socketObject.emit is not a function

我不太明白为什么 Pinia 不让我访问我的 Socket.io 实例中的函数，商店似乎可以正常处理我应用程序中的其他数据，只是无法调用这些函数。

Answer 1

useSocket return 是一个存储，而不是套接字实例。它应该用作：

const socketStore = useSocket();
...
socketStore.socketObject.emit(...)

io(...) 不是 return 承诺，将它与 await 一起使用在语义上是不正确的。

Object 构造函数的使用不正确。如果一个值未初始化，它可以为空：

  state: () => {
    return {socketObject: null};
  },

商店外的商店状态突变是一种不好的做法。所有状态修改都应由操作执行，这样可以通过开发工具轻松跟踪它们，这是使用商店的好处之一。

目前，在商店内包装 socketObject 没有任何好处。套接字实例可以与商店分开使用，或者套接字实例可以抽象出来并与商店操作等反应。

将 Socket.io 与 Pinia 一起使用时出现问题

Issue using Socket.io with Pinia

state-management

socket.io

vue.js

pinia