文章目录
- 引入
- 问题演示
- 实现效果展示、
- 实现步骤
- 1.封装状态初始化函数
- 2.封装状态更新同步函数
- 3.完整代码
引入
上一篇文章我们已经实现了electron多窗口中,pinia的状态同步,但你会发现,如果我们在一个窗口里面修改了状态,然后再打开另一个窗口,此时窗口的状态并没有同步,所以我们需要对pinia的状态进行持久化处理,并在页面初始化时取到本地缓存的状态。
demo项目地址
问题演示
如下所示,我们先在一个窗口中自增数值,然后再打开另一个窗口,此时窗口中的数值仍然是初始值,只有我们再次点击增加时,才会同步【因为我们上一节实现了pinia多窗口状态同步】
![请添加图片描述](https://img-blog.csdnimg.cn/a332078d1c3d4f1da6931581da068d2f.gif)
实现效果展示、
![请添加图片描述](https://img-blog.csdnimg.cn/b603811c58f040fcbbeb5e424c7a34ce.gif)
实现步骤
1.封装状态初始化函数
我们在src\store\plugins\shareStorePlugin.ts中补充初始化函数
- 当pinia对应的状态对象初始化时,我们将对象的引用传入
- 从本地缓存中取到序列化的store对象,我们将其反序列化后遍历key、value设置store的状态即可
function initStore(store: any) {
const cacheKey = STORE_CACHE_KEY_PREFIX + store.$id;
const stateJsonStr = cacheUtils.get(cacheKey);
if (stateJsonStr) {
const stateCache = JSON.parse(stateJsonStr);
const keys = Object.keys(stateCache);
const values = Object.values(stateCache);
for (let i = 0; i < keys.length; i++) {
store.$state[keys[i]] = values[i];
}
}
}
2.封装状态更新同步函数
我们在src\store\plugins\shareStorePlugin.ts中补充状态更新同步逻辑
- 之前的主动更新逻辑都是累加版本号、设置缓存,通知更新,我们不妨将这段逻辑抽离
- 将对应的store序列化后存入本地缓存中
function updateStoreSync(
stateJsonStr: string,
storeName: string,
storeUpdateVersion: number
) {
const storeCacheVersionKey = STORE_CACHE_VERSION_KEY_PREFIX + storeName;
cacheUtils.set(storeCacheVersionKey, storeUpdateVersion, STORE_CACHE_TIME);
ipcRenderer.invoke('pinia-store-change', storeName, stateJsonStr);
cacheUtils.set(STORE_CACHE_KEY_PREFIX + storeName, stateJsonStr);
}
3.完整代码
我们调整之前的代码,将两个函数嵌入到原来的逻辑之中
src\store\plugins\shareStorePlugin.ts
import { ipcRenderer } from "electron";
import cacheUtils from "@/utils/cacheUtils";
import { PiniaPluginContext } from "pinia";
const STORE_CACHE_TIME = 50;
const STORE_CACHE_KEY_PREFIX = "store_";
const STORE_CACHE_VERSION_KEY_PREFIX = STORE_CACHE_KEY_PREFIX + "version_";
declare module "pinia" {
export interface PiniaCustomProperties {
storeUpdateVersion: number;
}
}
function getLocalStoreUpdateVersion(storeCacheKey: string) {
let currentStoreUpdateVersion: number = cacheUtils.get(storeCacheKey);
if (
currentStoreUpdateVersion === null ||
currentStoreUpdateVersion === undefined
) {
currentStoreUpdateVersion = 0;
cacheUtils.set(storeCacheKey, currentStoreUpdateVersion, STORE_CACHE_TIME);
}
return currentStoreUpdateVersion;
}
export function shareStorePlugin({ store }: PiniaPluginContext) {
const storeName: string = store.$id;
const storeCacheVersionKey = STORE_CACHE_VERSION_KEY_PREFIX + storeName;
let currentStoreUpdateVersion: number =
getLocalStoreUpdateVersion(storeCacheVersionKey);
store.storeUpdateVersion = currentStoreUpdateVersion;
initStore(store);
store.$subscribe(() => {
currentStoreUpdateVersion = cacheUtils.get(storeCacheVersionKey);
if (
currentStoreUpdateVersion === null ||
currentStoreUpdateVersion === undefined
) {
currentStoreUpdateVersion = 0;
store.storeUpdateVersion = currentStoreUpdateVersion;
console.log(`主动更新 ${storeName} 的状态`);
updateStoreSync(
JSON.stringify(store.$state),
storeName,
store.storeUpdateVersion
);
} else {
if (store.storeUpdateVersion === currentStoreUpdateVersion) {
store.storeUpdateVersion++;
console.log(`主动更新 ${storeName} 的状态`);
updateStoreSync(
JSON.stringify(store.$state),
storeName,
store.storeUpdateVersion
);
} else {
store.storeUpdateVersion = currentStoreUpdateVersion;
}
}
});
ipcRenderer.on(
"pinia-store-set",
(event, targetStoreName: string, jsonStr: string) => {
if (storeName === targetStoreName) {
console.log("被动更新状态:" + storeName);
const obj = JSON.parse(jsonStr);
const keys = Object.keys(obj);
const values = Object.values(obj);
for (let i = 0; i < keys.length; i++) {
store.$state[keys[i]] = values[i];
}
}
}
);
}
function updateStoreSync(
stateJsonStr: string,
storeName: string,
storeUpdateVersion: number
) {
const storeCacheVersionKey = STORE_CACHE_VERSION_KEY_PREFIX + storeName;
cacheUtils.set(storeCacheVersionKey, storeUpdateVersion, STORE_CACHE_TIME);
ipcRenderer.invoke("pinia-store-change", storeName, stateJsonStr);
cacheUtils.set(STORE_CACHE_KEY_PREFIX + storeName, stateJsonStr);
}
function initStore(store: any) {
const cacheKey = STORE_CACHE_KEY_PREFIX + store.$id;
const stateJsonStr = cacheUtils.get(cacheKey);
if (stateJsonStr) {
const stateCache = JSON.parse(stateJsonStr);
const keys = Object.keys(stateCache);
const values = Object.values(stateCache);
for (let i = 0; i < keys.length; i++) {
store.$state[keys[i]] = values[i];
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)