electron多窗口状态同步 插件pinia-plugin-electron-share升级版

// src/utils/db.ts

const DB_NAME = 'pinia-electron-db'
const DB_VERSION = 1
const STORE_NAME = 'pinia-state'

export class SimpleIDB {
  private dbRequest: Promise<IDBDatabase>

  constructor() {
    this.dbRequest = new Promise((resolve, reject) => {
      const request = indexedDB.open(DB_NAME, DB_VERSION)
      
      request.onerror = () => reject(request.error)
      request.onsuccess = () => resolve(request.result)
      
      request.onupgradeneeded = (event) => {
        const db = (event.target as IDBOpenDBRequest).result
        if (!db.objectStoreNames.contains(STORE_NAME)) {
          db.createObjectStore(STORE_NAME) // keyPath 为 storeId
        }
      }
    })
  }

  async setItem(key: string, value: any) {
    const db = await this.dbRequest
    return new Promise<void>((resolve, reject) => {
      const tx = db.transaction(STORE_NAME, 'readwrite')
      const store = tx.objectStore(STORE_NAME)
      const req = store.put(value, key)
      
      req.onsuccess = () => resolve()
      req.onerror = () => reject(req.error)
    })
  }

  async getItem(key: string) {
    const db = await this.dbRequest
    return new Promise<any>((resolve, reject) => {
      const tx = db.transaction(STORE_NAME, 'readonly')
      const store = tx.objectStore(STORE_NAME)
      const req = store.get(key)
      
      req.onsuccess = () => resolve(req.result)
      req.onerror = () => reject(req.error)
    })
  }
}

// 导出单例
export const idb = new SimpleIDB()

// src/index.ts
import { PiniaPluginContext } from 'pinia'
import { idb } from './utils/db' // 引入上面的工具

declare module 'pinia' {
  export interface DefineStoreOptionsBase<S, Store> {
    share?: boolean
  }
}

export interface ElectronShareOptions {
  channelName?: string
}

// ✨ 载荷不再包含 data，只包含通知信号
type SyncPayload = {
  type: 'NOTIFY_UPDATE' | 'REQUEST_INIT' | 'RESPONSE_READY'
  storeId: string
  timestamp: number
  srcId: string
}

function generateId() {
  return Math.random().toString(36).substr(2, 9)
}

export function createElectronSharePlugin(globalOptions: ElectronShareOptions = {}) {
  const CHANNEL_NAME = globalOptions.channelName || 'pinia-electron-share'
  const channel = new BroadcastChannel(CHANNEL_NAME)
  const WINDOW_ID = generateId()

  return ({ store, options }: PiniaPluginContext) => {
    if (!options.share) return

    // --- 状态标志 ---
    let isExternalUpdate = false // 正在应用外部数据
    let isInitialized = false
    let initInterval: any = null
    let replyDebounceTimer: any = null

    // --- 核心：从 DB 读取并应用数据 ---
    const applyStateFromDB = async () => {
      try {
        const data = await idb.getItem(store.$id)
        if (data) {
          // 标记为外部更新，防止触发 subscribe 再次写入 DB
          isExternalUpdate = true
          store.$patch(data)
          
          // 给一点缓冲时间让 Vue Reactivity 完成，防止立刻触发 subscribe
          setTimeout(() => { isExternalUpdate = false }, 50)
        }
        return !!data
      } catch (err) {
        console.error(`[Share] Read DB failed:`, err)
        return false
      }
    }

    // --- 消息处理 ---
    const messageHandler = async (event: MessageEvent<SyncPayload>) => {
      const { type, storeId, srcId } = event.data

      if (storeId !== store.$id || srcId === WINDOW_ID) return

      switch (type) {
        case 'NOTIFY_UPDATE':
          // 收到别人的更新通知 -> 去查 DB
          if (!isExternalUpdate) {
             await applyStateFromDB()
             
             // 如果我是刚启动的窗口，收到这个也算初始化完成
             if (!isInitialized) {
               isInitialized = true
               clearInterval(initInterval)
             }
          }
          break

        case 'REQUEST_INIT':
          // 别人在请求初始化
          if (isInitialized) {
            // 竞态抑制：随机延迟回复
            const delay = Math.floor(Math.random() * 90) + 10
            replyDebounceTimer = setTimeout(async () => {
              // ✨ 关键：先把我也许还没保存的内存状态，强制刷入 DB
              // 确保新窗口读到的是最新的
              await idb.setItem(storeId, JSON.parse(JSON.stringify(store.$state)))

              // 发送 "数据已就绪" 信号 (不带数据)
              channel.postMessage({
                type: 'RESPONSE_READY',
                storeId: store.$id,
                timestamp: Date.now(),
                srcId: WINDOW_ID
              })
            }, delay)
          }
          break

        case 'RESPONSE_READY':
          // 收到 "数据已就绪" 信号
          if (replyDebounceTimer) {
            clearTimeout(replyDebounceTimer)
            replyDebounceTimer = null
          }

          if (!isInitialized) {
            console.log(`[Share] DB Ready signal received from ${srcId}`)
            // 去 DB 拉取数据
            await applyStateFromDB()
            
            isInitialized = true
            clearInterval(initInterval)
          }
          break
      }
    }

    channel.addEventListener('message', messageHandler)

    // --- 监听状态变化 (写入方) ---
    store.$subscribe(async (mutation, state) => {
      if (isExternalUpdate) return
      if (!isInitialized) return

      try {
        // 1. 先写入 IndexedDB
        const rawState = JSON.parse(JSON.stringify(state))
        await idb.setItem(store.$id, rawState)

        // 2. 写入成功后，发送轻量级通知
        channel.postMessage({
          type: 'NOTIFY_UPDATE',
          storeId: store.$id,
          timestamp: Date.now(),
          srcId: WINDOW_ID
        })
      } catch (e) {
        console.error(`[Share] Save to DB error`, e)
      }
    })

    // --- 初始化流程 ---
    
    // 尝试直接从 DB 读取一次 (也许是刷新页面，DB里已经有数据了)
    applyStateFromDB().then((hasData) => {
        if (hasData) {
            // 只要 DB 有数据，就算初始化完成，但也可能数据是旧的
            // 所以我们仍然可以发 REQUEST_INIT 确认一下有没有更权威的窗口
            // 但为了简单，如果 DB 有数据，通常认为是持久化的结果
            isInitialized = true
            // 这里看策略：
            // 策略A: 信任 DB，直接完成。
            // 策略B: 即使 DB 有，也问一下其他窗口有没有更新的内存数据。
            // 下面代码采用策略 B，继续轮询一会
        }
    })

    initInterval = setInterval(() => {
      if (isInitialized) {
        clearInterval(initInterval)
        return
      }
      // 喊话：谁有最新数据？请刷入 DB 并告诉我
      channel.postMessage({
        type: 'REQUEST_INIT',
        storeId: store.$id,
        timestamp: Date.now(),
        srcId: WINDOW_ID
      })
    }, 200)

    // 兜底
    setTimeout(() => {
      if (!isInitialized) {
        console.log('[Share] Init timeout, using local/DB state.')
        isInitialized = true
        clearInterval(initInterval)
      }
    }, 1000)
  }
}