electron 多窗口 vuex/pinia 数据状态同步简易方案（利用 LocalStorage）

TangAcrab2024-05-09 18:03

全局 stroe 添加 mutations 状态同步方法

ts 复制代码

  // 用于其他窗口同步 vuex 中的 DeviceTcpData
  asyncDeviceTcpData(state: StateType, data: any) {
    state.deviceTcpData = data
  },

App.vue 里

ts 复制代码

onMounted(() => {
  console.log("App mounted");
  /**
   * vuex 多窗口 store 同步
   */
   // 1. 初始赋值
  // 从 localStorage 同步 tcp 上报的数据到 vuex
  const deviceTcpData = localStorage.getItem("deviceTcpData");
  if (deviceTcpData) {
    store.commit("asyncDeviceTcpData", JSON.parse(deviceTcpData));
  }
  // 2. 监听 storage 事件 同步 全局 state
  // 其他渲染进程，当设置进程进行修改storage的时候，其他进程可以根据storage变化来更改自己的store
  window.addEventListener("storage", () => {
    const deviceTcpData = localStorage.getItem("deviceTcpData");
    deviceTcpData &&
      store.commit("asyncDeviceTcpData", JSON.parse(deviceTcpData));
  });
  
    // 从主界面关闭时，清空本地存储的数据 (清除 localstorage 的时机)
  window.addEventListener("beforeunload", (e: any) => {
    if (route.name === "search") {
      localStorage.removeItem("deviceTcpData");
    }
  });
});

关键: 利用 watch 监听全局 state 的变动，每次变动，进行 localStorage 同步

ts 复制代码

// 监听 全局 store 的变动
watch(
  () => store.state.deviceTcpData,
  (val) => {
    console.log("watch 触发");
    console.log(val);
    localStorage.setItem("deviceTcpData", JSON.stringify(val));
  },
  {
    deep: true,
  }
);

缺点：数据量大时，消耗性能较高。可用作少量数据的同步方案；