pinia-plugin-electron-share

Sync Pinia state across multiple Electron windows (Renderer Processes).

Installation

npm install pinia-plugin-electron-share

Usage

demo electron-vite + pinia + dockview

https://github.com/wustxing/code_demo/tree/main/my-app

1. Register the Plugin

// store/index.ts
import { createPinia } from 'pinia'
import { createElectronSharePlugin } from 'pinia-plugin-electron-share'

const pinia = createPinia()

pinia.use(createElectronSharePlugin({
  // Optional: Custom channel name
  channelName: 'my-app-sync' 
}))

export default pinia

2. Enable in Store

// store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  },
  // Enable sync for this store
  share: true 
})

3. 在你的项目中使用： 在你的 Electron 项目中 npm install pinia-plugin-electron-share，然后按照 README 配置即可。

为什么这样做更好？

1. 解耦：你的业务代码库不会混入一堆复杂的 IPC 通信逻辑。
2. 复用：如果你有下一个 Electron 项目，直接 install 即可。
3. 类型安全：通过 declare module，你的同事在写 defineStore 时，输入 share: 会自动获得代码提示，这才是高级开发体验。