Quasar v2 Vue3 Electron：子窗口如何通过Preload访问Pinia Store？

Preload脚本运行在独立于Vue应用的环境中，没有Vue实例上下文，因此无法直接调用Pinia的useStore方法。以下是适配Electron环境的实现步骤：

1. 主窗口监听Store变化并发送到主进程 #

在主窗口的Vue组件中，监听Pinia Store的更新，将数据同步到Electron主进程：

// 主窗口Vue组件
import { usePrinter } from 'src/stores/printStore';
import { ipcRenderer } from 'electron';

const printerStore = usePrinter();

// 初始化时发送一次当前Store数据
ipcRenderer.send('sync-printer-store', printerStore.$state);

// 监听Store变化，实时同步
printerStore.$subscribe((_, state) => {
  ipcRenderer.send('sync-printer-store', state);
});

2. 主进程转发数据到子窗口 #

在Electron主进程文件（如electron-main.ts）中，接收主窗口发来的Store数据，转发给已打开的子窗口：

// Electron主进程
import { app, BrowserWindow, ipcMain } from 'electron';
import path from 'path';

let mainWindow: BrowserWindow | null;
let childWindow: BrowserWindow | null;

// 创建主窗口逻辑...

// 监听主窗口的Store同步请求
ipcMain.on('sync-printer-store', (_, storeData) => {
  if (childWindow && !childWindow.isDestroyed()) {
    childWindow.webContents.send('receive-printer-store', storeData);
  }
});

// 创建子窗口的方法
function createChildWindow() {
  childWindow = new BrowserWindow({
    parent: mainWindow,
    webPreferences: {
      preload: path.join(__dirname, 'child-preload.ts'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });
  // 加载子窗口页面...
}

3. 子窗口Preload暴露监听接口 #

子窗口的Preload脚本通过contextBridge向渲染进程暴露监听Store数据的方法：

// 子窗口Preload脚本
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('childAPI', {
  onPrinterStoreUpdate: (callback: (data: any) => void) => {
    ipcRenderer.on('receive-printer-store', (_, data) => callback(data));
  }
});

4. 子窗口Vue组件接收并更新本地Store #

在子窗口的Vue组件中，通过暴露的API接收数据，同步到自身的Pinia Store：

// 子窗口Vue组件
import { usePrinter } from 'src/stores/printStore';
const printerStore = usePrinter();

window.childAPI.onPrinterStoreUpdate((data) => {
  printerStore.$patch(data);
});

• URL参数初始化传递：如果只需初始化时传递数据，可在打开子窗口时将数据编码为URL参数：

  // 主进程打开子窗口
  const storeStr = encodeURIComponent(JSON.stringify(printerStore.$state));
  childWindow?.loadURL(`http://localhost:8080/child-page?store=${storeStr}`);
  

  子窗口组件通过useRoute().query获取并解析数据。

• 主进程直接注入数据：通过webContents.executeJavaScript在子窗口渲染进程中注入初始化数据：

  // 主进程
  childWindow?.webContents.executeJavaScript(`
    window.printerInitData = ${JSON.stringify(printerStore.$state)};
  `);
  

  子窗口组件在挂载时读取window.printerInitData来初始化本地Store。

• 共享本地存储：利用Electron的session共享localStorage，或写入本地JSON文件，适合非实时、大容量的数据传递（需注意数据同步时机）。

内容的提问来源于stack exchange，提问作者DRW