在 Pinia 中使用 Socket.io 时出现问题

Question

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

this.socketObject.emit is not a function

从 Socket.io 实例调用函数时，当我从创建 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商店

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

@/components/ obbySettings（这是我通过 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 不是一个函数

我不太明白为什么 Pinia 不让我访问 Socket.io 实例中的函数，该商店似乎对我的应用程序中的其他数据运行良好，只是无法调用这些函数。

Answer 1

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

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

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

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

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

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

此时，socketObject在商店内进行包装没有任何好处。套接字实例可以与存储分开使用，也可以将套接字实例抽象出来并与存储操作等进行反应。