Electron+vue3+pinia多窗口共享/同步状态

先上图看效果

主进程监听自定义修改事件

js 复制代码
ipcMain.on('update-storage', (_, key) => {
  webContents.getAllWebContents().map((webContent) => {//获取所有WebContents实例的数组
    webContent.send('update-storage', key)//经过预加载脚本向渲染进程发送异步带参消息
  })
})

预加载脚本

js 复制代码
import { contextBridge, ipcRenderer } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'

// Custom APIs for renderer
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
}

渲染进程

js 复制代码
//pinia存储定义修改方法,所有渲染进程引用同一个store
import { defineStore } from 'pinia'
import { reactive } from 'vue'

export const useUserStore = defineStore('user', () => {
  const userInfo = reactive({
    name: '张三',
    age: 16
  })

  const updateUserInfo = ({ key, value }) => {
    userInfo[key] = value
  }

  return {
    userInfo,
    updateUserInfo
  }
})
html 复制代码
<template>
  <BaseLayout>
    <template #header>
      <Header minimize="testMinimize" maximize="testMaximize" close="testClose"></Header>
    </template>
    <el-alert title="test窗口" type="success" />
    <div>用户姓名:{{ userStore.userInfo.name }}</div>
    <div>用户年龄:{{ userStore.userInfo.age }}</div>
    <el-input v-model="keyName" placeholder=""></el-input>
    <el-button type="primary" @click="updateUserInfo">修改用户姓名</el-button>
  </BaseLayout>
</template>
<script setup lang="ts">
import BaseLayout from '@src/layouts/BaseLayout.vue'
import Header from '@src/layouts/components/Header.vue'
import { useUserStore } from '@src/store/modules'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const keyName = ref('')
const userStore = useUserStore()
const updateUserInfo = () => {
  if (keyName.value.trim()) {
    const data = {
      key: 'name',
      value: keyName.value
    }
    //向主进程发送修改事件
    window.electron.ipcRenderer.send('update-storage', JSON.stringify(data))
  }
  keyName.value = ''
}
//所以渲染进程监听修改事件,调用修改方法
window.electron.ipcRenderer.on('update-storage', (_, data) => {
  userStore.updateUserInfo(JSON.parse(data))
  ElMessage.success('pinia数据更新了~')
})
</script>

以上采用的方法并没有存储到localstorage里,还可以先存储到localstorage,通过修改事件,pinia直接拿localstorage里面的数据进行赋值(end)

相关推荐
还是大剑师兰特3 分钟前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
用户47949283569159 分钟前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
__WanG29 分钟前
如何编写标准StatefulWidget页面
前端·flutter
非凡ghost40 分钟前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost44 分钟前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost1 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端
LinXunFeng1 小时前
Flutter 多仓库本地 Monorepo 方案与体验优化
前端·flutter·架构
非凡ghost1 小时前
ProcessKO(查杀隐藏危险进程)多语便携版
前端·javascript·后端
yinuo1 小时前
你的网页还不会"看人"?3分钟让它拥有会追踪的眼睛
前端
守正出琦1 小时前
带代码示例的 HTML 标签实操手册
前端·html