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

Question

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

this.socketObject.emit is not a function

当我从创建 Socket.io 实例的组件/ 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 商店

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 返回一个存储，而不是套接字实例。它应该用作:

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

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

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

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

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

此时，将 socketObject 打包到存储中没有任何好处。套接字实例可以与存储分开使用，也可以将套接字实例抽象出来并与存储操作等进行 react 。