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

前言

通过indexDb存储pinia的相关数据。传输的时候不用传输整个数据

核心思想转变:
之前的模式是 “数据跟随消息” (Push Data),现在的模式是 “消息通知,数据自取” (Signal & Pull)

  1. 写入方:Store 变更 -> 写入 IndexedDB -> 发送 “数据已更新” 的信号(不带数据)。
  2. 接收方:收到信号 -> 从 IndexedDB 读取最新数据 -> 更新 Store。
  3. 初始化:新窗口启动 -> 请求初始化 -> 老窗口强制将内存数据刷入 IndexedDB -> 发送 “准备好了” -> 新窗口从 DB 读取。

这样做的好处是 BroadcastChannel 极其轻量,不再受数据大小限制,且数据持久化由 IndexedDB 承担。

BroadcastChannel 握手机制的方法

BroadcastChannel 握手机制的方法实现

使用场景,dokeview tab拖出来窗口外第一次创建窗口的时候传递参数。

将这种“握手”逻辑封装成通用的工具函数,可以大大减少重复代码,并保证逻辑的健壮性。

封装了一个类型安全、支持超时控制的 WindowSync 工具库。

监听窗口创建完成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// src/main/index.ts

// 1. 监听新窗口创建请求 (拦截层)
mainWindow.webContents.setWindowOpenHandler((details) => {
// details.url 包含了新窗口的 URL
// details.frameName 可能是 dockview 指定的名字
console.log('⚡️ 检测到 Tab 被拖出,正在请求创建窗口:', details.url)

// 你可以在这里判断 url 是否包含特定的 query 参数,来确定这是 dockview 的弹窗

return {
action: 'allow',
overrideBrowserWindowOptions: {
// 在这里强制指定新窗口的样式
autoHideMenuBar: true,
webPreferences: {
preload: join(__dirname, '../preload/index.js'), // 别忘了 preload
backgroundThrottling: false,
// ...其他配置
}
}
}
})

// 2. 监听窗口创建完成 (结果层)
mainWindow.webContents.on('did-create-window', (childWindow, details) => {
console.log('✅ 新窗口实例已创建 (Tab 弹出成功)')

// 业务场景:你可能想告诉主渲染进程“有个子窗口诞生了”
mainWindow.webContents.send('popout-window-created', {
id: childWindow.id,
title: childWindow.getTitle()
})

// 业务场景:监听子窗口的关闭,做一些清理工作
childWindow.on('closed', () => {
console.log('❌ 子窗口已关闭')
mainWindow.webContents.send('popout-window-closed', { id: childWindow.id })
})
})

上传到npm仓库

发布 npm 包不仅仅是把代码放上去,还需要考虑 构建规范 (ESM/CJS)类型定义 (TypeScript .d.ts)Peer Dependencies 以及 扩展性

既然我们要把它做成一个通用的 pinia-plugin-electron-share,我们需要让它支持配置(比如自定义 Channel 名称),并且具备完善的工程化结构。

这里是可以直接 npm publish 的完整工程代码结构

vite注意事项

vite本地开发第三方库样式冲突解决方案

问题描述

在使用vite开发vue项目时,
同时使用了 elementui-plus和 element-plus-x,
然后 在开发环境 里面有一些 element-plus-x 的特殊样式会污染elementui-plus的原有样式。

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器