如何将信息从“socket.on”监听器内部传递到 pinia 数据存储？

Question

我正在制作一个数据存储，数据存储使用“socket.on”监听服务器，我可以从控制台看到数据正确到达“socket.on”。但是，当我尝试在“socket.on”中调用操作时，出现此错误： useSolarFieldData.updateData 不是以下代码中的函数：

import { defineStore } from "pinia";
import { io } from "socket.io-client";

const socket = io("http://localhost:5000");

export const useMyStoreData = defineStore({
  id: "useMyData",
  state: () => ({
    azi_1: null,
    azi_2: null,
    azi_3: null,
    date: null,
  }),

  actions: {
    updateData(data) {
      this.azi_1 = data.azi_1;
      this.azi_2 = data.azi_2;
      this.azi_3 = data.azi_3;
      this.date = data.date;
    },
  },
});

socket.on("dynamic_values", (data) => {

  console.log("Data received from socket:", data); 

  useMyStoreData.updateData(data);

  console.log("Store updated:", useMyStoreData); 
});

export default useMyStoreData;`

我尝试将值直接定义到 socket.on 监听器中：

socket.on("dynamic_values", (data) => {
  console.log("Data received from socket:", data); // Console log added

  useSolarFieldData.azimuth = data.azimuth;
  useSolarFieldData.elevation = data.elevation;
  useSolarFieldData.DNI = data.DNI;
  useSolarFieldData.date = data.date;
  console.log("Store updated:", useSolarFieldData);

});

我可以看到控制台日志中正在更新的值，但它们不是反应性的，它们也不会在存储中更新，一旦我调用 socket.on 中的任何函数，它就会向我返回“不是函数”错误。

Answer 1

问题是您正在立即导出

useMyStoreData

，使用

export

键以及商店声明。这样，javascript 将使存储可用于导入，但无法在同一文件/上下文中使用（不导入它）。为了使代码正常工作，您可以首先将商店声明为

const

，然后稍后将其导出。但请注意，最佳实践是将 pinia 存储和 socket.io 逻辑放入不同的文件中，以实现有效的关注点分离。

import { defineStore } from "pinia";
import { io } from "socket.io-client";

const socket = io("http://localhost:5000");

const useMyStoreData = defineStore({
    id: "useMyData",
    state: () => ({
        azi_1: null,
        azi_2: null,
        azi_3: null,
        date: null,
    }),

    actions: {
        updateData(data) {
            this.azi_1 = data.azi_1;
            this.azi_2 = data.azi_2;
            this.azi_3 = data.azi_3;
            this.date = data.date;
        }
    }
});

socket.on("dynamic_values", (data) => {
    console.log("Data received from socket:", data); 
    useMyStoreData.updateData(data);
    console.log("Store updated:", useMyStoreData); 
});

export default useMyStoreData;