electron多窗口状态同步 插件开发pinia-plugin-electron-share

import { PiniaPluginContext } from 'pinia';

// 扩展 Pinia 的定义，以便在使用 defineStore 时有代码提示
declare module 'pinia' {
  export interface DefineStoreOptionsBase<S, Store> {
    /**
     * 是否在 Electron 多窗口之间同步该 Store 的状态
     * @default false
     */
    share?: boolean;
  }
}

// 消息类型定义
type SyncPayload = {
  type: 'UPDATE' | 'REQUEST_INIT' | 'RESPONSE_INIT';
  storeId: string;
  data?: any; // State object
  timestamp: number;
};

// 频道名称
const CHANNEL_NAME = 'electron-pinia-share-channel';

export function piniaPluginElectronShare({ store, options }: PiniaPluginContext) {
  // 1. 检查当前 Store 是否开启了共享
  if (!options.share) {
    return;
  }

  // 2. 创建广播频道 (所有窗口共用同一个频道名)
  const channel = new BroadcastChannel(CHANNEL_NAME);

  // 内部状态锁：防止死循环 (收到消息更新时，不再广播出去)
  let isExternalUpdate = false;

  /**
   * 核心逻辑：处理接收到的消息
   */
  channel.onmessage = (event: MessageEvent<SyncPayload>) => {
    const { type, storeId, data, timestamp } = event.data;

    // 只处理当前 Store 的消息
    if (storeId !== store.$id) return;

    switch (type) {
      // 场景 A: 收到其他窗口的状态更新
      case 'UPDATE':
        if (!isExternalUpdate) {
          isExternalUpdate = true;
          store.$patch(data);
          // 这里稍微延迟一点释放锁，确保 Vue 响应式系统处理完毕
          setTimeout(() => { isExternalUpdate = false; }, 0);
        }
        break;

      // 场景 B: 新窗口刚打开，请求初始化数据 (我是老窗口，我有数据)
      case 'REQUEST_INIT':
        // 为了避免多个老窗口同时回复，这里可以做一个简单的随机延迟，或者由于是替换操作，多次回复也无所谓
        // 直接发送当前状态给新窗口
        channel.postMessage({
          type: 'RESPONSE_INIT',
          storeId: store.$id,
          data: JSON.parse(JSON.stringify(store.$state)),
          timestamp: Date.now(),
        });
        break;

      // 场景 C: 我是新窗口，收到了初始化数据
      case 'RESPONSE_INIT':
        isExternalUpdate = true;
        store.$patch(data);
        setTimeout(() => { isExternalUpdate = false; }, 0);
        break;
    }
  };

  /**
   * 核心逻辑：监听当前 Store 变化并广播
   */
  store.$subscribe((mutation, state) => {
    // 如果是由外部消息触发的更新，则不广播，断绝死循环
    if (isExternalUpdate) return;

    // 序列化 State (去除 Vue 的响应式代理，转为纯 JSON)
    // 注意：如果有 Date/Map/Set 需要特殊处理，这里假设是基础 JSON
    const rawState = JSON.parse(JSON.stringify(state));

    channel.postMessage({
      type: 'UPDATE',
      storeId: store.$id,
      data: rawState,
      timestamp: Date.now(),
    });
  });

  /**
   * 初始化逻辑：
   * 插件加载（Store 创建）时，如果是新窗口，可能数据是空的。
   * 发送一个 "REQUEST_INIT" 广播，问问有没有其他窗口存活着并有数据。
   */
  // 延时极短的时间，确保 BroadcastChannel 已经准备好，且不会阻塞主线程
  setTimeout(() => {
    channel.postMessage({
      type: 'REQUEST_INIT',
      storeId: store.$id,
      timestamp: Date.now(),
    });
  }, 50);
  
  // 组件销毁时关闭频道 (可选，Pinia Store 通常生命周期伴随整个应用，不关也没事)
  // return () => { channel.close(); } 
}

import { createPinia } from 'pinia';
import { piniaPluginElectronShare } from '../plugins/pinia-plugin-electron-share'; // 引入上面写的文件

const pinia = createPinia();

// 注册插件
pinia.use(piniaPluginElectronShare);

export default pinia;

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: {
      name: 'Guest',
      age: 0
    },
    // 假设这是 Dockview 的布局配置，也需要同步
    layoutConfig: {} 
  }),
  
  actions: {
    updateName(name: string) {
      this.userInfo.name = name;
    }
  },

  // 开启多窗口同步
  share: true 
});

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  function increment() { count.value++ }

  return { count, increment };
}, {
  // Setup Store 的配置项在这里
  share: true 
});