pinia仓库数据同步
- 解决不同窗口之间pinia数据同步
- 这是在网上查找和问ai结合的方法，能实现数据同步，但是不是特别理解，只提供使用方法。
1、首先，在主进程中监听特定的 IPC（进程间通信）消息
在 Electron 应用的主进程中，用于监听特定的 IPC（进程间通信）消息 update-storage，当接收到该消息时，它会将消息中携带的关键信息（这里是 key）广播给除了发送该消息的窗口之外的其他所有已打开的窗口。其目的是实现不同窗口之间关于存储数据变化情况的同步通知，确保各个窗口能及时知晓并处理存储相关的变更。
// 监听store仓库变化，广播给其他窗口 src/main/index.ts
ipcMain.on('update-storage', (event, key) => {
for (const currentWin of BrowserWindow.getAllWindows()) {
const webContentsId = currentWin.webContents.id
if (webContentsId !== event.sender.id) {
currentWin.webContents.send('update-storage', key)
}
}
})
2、然后在预加载脚本，建立机制
定义了一个名为 onUpdateStorage 的函数，其主要目的是在 Electron 应用的渲染进程中建立一个机制，用于监听来自主进程的特定 IPC（进程间通信）消息 update-storage。通过将一个回调函数作为参数传递给 onUpdateStorage 函数，当渲染进程接收到 update-storage 消息时，就可以执行相应的自定义操作，并且可以通过 window 来访问相关的事件和参数信息。
//将事件传递给渲染进程,渲染进程通过window访问 src/preload/index.ts
onUpdateStorage: (callback: (event: Electron.IpcRendererEvent, ...args: any[]) => void) => {
ipcRenderer.on('update-storage', callback)
}
3、在需要实时同步的数据窗口中接收update-storage 消息
- src/renderer/src/components/detail.vue
- 对于该软件，所有窗口都调用了该组件或者说需要实时同步的操作都在这里进行，所以我只需要在该组件接收
update-storage消息，即可实现所有窗口都接受update-storage消息。不然的话每个需要实现实时同步的窗口都需要手动实现接收操作。
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { settingStore } from '@renderer/store/setting'
let myApi
// 你需要同步的仓库
const set = settingStore()
onMounted(() => {
// 接收消息
myApi.onUpdateStorage((_, data) => {
set.$state = JSON.parse(data)
})
})
4、使用
- 在设置窗口中更改右键功能，实时更新其它子窗口或主窗口图片详情页的右键功能
- src/renderer/src/views/Setting/sets/other.vue
import { settingStore } from '@renderer/store/setting'
// 你需要同步的仓库
const set = settingStore()
const { ipcRenderer } = require('electron')
const handleChange5 = () => {
// 更新仓库信息的操作
···
···
···
// 发送消息 更新后的仓库信息
ipcRenderer.send('update-storage', JSON.stringify(set.$state))
}
