全局 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,}
);
缺點： 數據量大時，消耗性能較高。可用作少量數據的同步方案；
)
