Electron开发模板、Pinia仓库数据同步Electron + Vite + Ts + Vue3 + Pinia

Electron + Vite + Ts + Vue3 + Pinia 开发模板

基础路由配置
多窗口配置
集成sass、pinia（数据同步）

1、纯净模板，只集成了开发所需要的必要模板

打包安装前往以前的文章查看，这里就不再做过多赘述 juejin.cn/post/744124…
仓库地址：gitee.com/zsnoin-can/…

2、重点还是介绍 pinia各窗口之间的数据同步

通信机制还是和以前一致，主要优化用法，可前往 juejin.cn/post/744105… 查看，这里只介绍优化后的用法。
实例如下：

方便实现多仓库的数据同步，添加第二个参数

主进程中监听，具体前往juejin.cn/post/744105… 查看

// 监听store仓库变化，广播给其他窗口
ipcMain.on('update-storage', (event, key, name) => {
  for (const currentWin of BrowserWindow.getAllWindows()) {
    const webContentsId = currentWin.webContents.id
    if (webContentsId !== event.sender.id) {
      currentWin.webContents.send('update-storage', key, name)
    }
  }
})

预加载脚本挂载

import { contextBridge, ipcRenderer } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'

const api = {
  //将事件传递给渲染进程,渲染进程通过window访问
  onUpdateStorage: (callback: (event: Electron.IpcRendererEvent, ...args: any[]) => void) => {
    ipcRenderer.on('update-storage', callback)
  }
}

if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('electron', electronAPI)
    contextBridge.exposeInMainWorld('api', api)
  } catch (error) {
    console.error(error)
  }
} else {
  // @ts-ignore (define in dts)
  window.electron = electronAPI
  // @ts-ignore (define in dts)
  window.api = api
}

`统一监听变化，我们可以在 App.vue 中统一监听仓库变化，无需在每个子窗口都监听`

在这里可以根据第二个参数给不同的仓库同步数据，为了方便，本文采取的整体数据替换，你可以根据自己的需求决定是否需要整体替换。
我们只需要在 App.vue 中做统一监听即可，仓库数据变化，发送消息通知，在这里就能统一监听。

<template>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { settingStore } from '@renderer/store/setStore'
const setStoreData = settingStore()
let myApi
onMounted(() => {
  myApi = window.api
  myApi.onUpdateStorage((_, data, name) => {
    console.log(name);
    setStoreData.$state = JSON.parse(data)
    switch (name) {
      case 'setStoreData':
        setStoreData.$state = JSON.parse(data)
        break
    }
  })
})
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>

仓库数据变化、发送消息通知

setStoreData 仓库数据发生变化就通过 ipcRenderer.send 发生消息，这样 App.vue就能接收到最新的数据，并同步给其它窗口。

const { ipcRenderer } = require('electron')
const addCount = () => {
    setStoreData.addCount()
    ipcRenderer.send('update-storage', JSON.stringify(setStoreData.$state), 'setStoreData')
}

对比前文，大幅度提高便捷性，只需要统一监听即可，无需给每个子窗口都添加监听。

可以实现对不同的仓库进行数据同步，因为开发中可能存在多个仓库。