当前位置：首页 > news >正文

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

news 2025/8/6 23:17:05

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

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

App.vue 里

onMounted(() => {console.log("App mounted");/*** vuex 多窗口 store 同步*/// 1. 初始赋值// 从 localStorage 同步 tcp 上报的数据到 vuexconst deviceTcpData = localStorage.getItem("deviceTcpData");if (deviceTcpData) {store.commit("asyncDeviceTcpData", JSON.parse(deviceTcpData));}// 2. 监听 storage 事件 同步 全局 state// 其他渲染进程，当设置进程进行修改storage的时候，其他进程可以根据storage变化来更改自己的storewindow.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 同步

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