electron+vue3全家桶+vite项目搭建【16.1】electron多窗口,pinia状态同步，扩展store方法，主动同步pinia的状态【推荐】

引入

demo项目地址

我们之前写了一个自动同步pinia状态的插件，可以参考如下文章

electron+vue3全家桶+vite项目搭建【16】electron多窗口，pinia状态无法同步更新问题解决

这里面有一个较大的弊端，就是pinia中的store，只要其中的某个属性修改，就会触发这个store的全量更新，当我们有一些状态频繁更新的时候，就会影响性能，并且有些窗口中的store其实是不需要同步的，但我们无法进行精准的控制，而且为了保证多个窗口间的同步一致，我们做了很多兜底处理。

现在提供另一个思路，我们不被动的自动更新同步store的状态，而是通过扩展store的actions方法，让业务主动调用方法时来主动通知其他窗口完成同步。

实现效果如下

可以看到，只有当我主动触发同步方法时，才会进行窗口间的状态同步

实现步骤

1.自定义pinia插件

自定义pinia插件，扩展store，扩展一个stateSync方法

• 我们先声明一个stateSync方法，然后在store初始化的时候重写该方法

• src\store\plugins\shareStoreByActionPlugin.ts

import {
   
    ipcRenderer } from "electron";
import cacheUtils from "@/utils/cacheUtils";
import {
   
    PiniaPluginContext } from "pinia";

// 设置本地store缓存的key
const STORE_CACHE_KEY_PREFIX = "store_";

declare module "pinia" {
   
   
  export interface PiniaCustomProperties {
   
   
    // 通知主进程让所有窗口同步pinia的状态
    stateSync(): void;
  }
}

// 处理electron多窗口，pinia共享问题
export function shareStorePlugin({
   
    store }: PiniaPluginContext) {
   
   
  // 初始化本地缓存版本
  const storeName: string = store.$id;
  // 初始化store
  initStore(store);
  // 重写状态同步方法
  store.stateSync = () => {
   
   
    updateStoreSync(stringify(store.$state), storeName);
  };

  // 监听数据同步修改
  ipcRenderer.on(
    "pinia-store-set",
    (event, targetStoreName: string, jsonStr: string) => {