我正在嘗試使用 Pinia 來管理我正在構建的 Vue.js 應用程式中的一些全域狀態，特別是我想在各種組件和視圖之間共享一個 Socket.io 實體。但是我得到了一個
this.socketObject.emit is not a function
從 Socket.io 實體呼叫函式時出錯，當我從創建 Socket.io 實體的組件/視圖以外的組件呼叫它們時。這是代碼的一些摘錄。
@/views/ LobbyView.vue（這是我創建 Socket.io 實體并將其傳遞給 Pinia 存盤的地方，我可以在此檔案中正常使用 emit 而不會出現任何錯誤）
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松樹商店
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 不是函式
我不太明白為什么 Pinia 不讓我從我的 Socket.io 實體訪問函式，商店似乎對我的應用程式中的其他資料作業正常，只是不能呼叫這些函式。
uj5u.com熱心網友回復：
useSocket回傳一個商店，而不是套接字實體。它應該用作：
const socketStore = useSocket();
...
socketStore.socketObject.emit(...)
io(...)不回傳承諾，將它與 . 一起使用在語意上是不正確的await。
建構式的使用Object不正確。如果一個值未初始化，它可以為 null：
state: () => {
return {socketObject: null};
},
商店外的商店狀態的突變是一種不好的做法。所有的狀態修改都應該通過動作來執行，這樣它們就可以很容易地通過開發工具進行跟蹤，這是使用商店的好處之一。
socketObject在這一點上，在商店內打包沒有任何好處。套接字實體可以與存盤分開使用，或者套接字實體可以被抽象出來并與存盤操作等反應。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/479357.html
下一篇：從urlVueJs獲取查詢值