Electron+Vue3启动加载配置文件至Vuex状态失败求助

问题描述 #

使用Vue3构建Electron应用，基础首页运行正常。需求是应用启动时加载config.json并将数据保存到Vuex Store中。当前实现流程如下：

1. 主进程配置IPC处理器：

import { app, ipcMain } from "electron";
import store from "@/store";

ipcMain.on("init-app", (settingsData) => {
    console.log("Init app", settingsData);
    store.commit('updateSettings', settingsData);
});

2. background.js中窗口创建时发送事件：

app.on('ready', async () => {
    createWindow().then((win) => {
        setupIpcHandlers();
        const settingsPath = path.join(app.getPath('userData'), 'settings.json');
        fs.readFile(settingsPath, 'utf8', (err, data) => {
            const settingsData = err ? {} : JSON.parse(data);
            ipcMain.emit("init-app", settingsData);
        });
    });
})

3. Vuex Store的updateSettings mutation：

mutations: {
    updateSettings(state, settings) {
        console.log("Updating settings", settings);
        state.appSettings = settings;
    }
},

现象：启动应用时终端日志显示配置加载正常，mutation日志输出正确数据，但Store状态并未保存；后续通过用户操作触发该mutation时却能正常工作。

问题原因 #

主进程与渲染进程是Electron中完全独立的两个进程，主进程中导入的Vuex Store实例和渲染进程中的Store实例并非同一个。你在主进程里调用store.commit修改的是主进程内的Store实例，而渲染进程（页面）使用的是另一个独立的Store实例，因此页面无法感知到主进程中Store的变化。

修复方案 #

正确的做法是：主进程读取配置后，通过IPC将数据发送给渲染进程，由渲染进程调用自身的Store来更新状态。

步骤1：修改主进程发送消息的方式 #

将background.js中的ipcMain.emit改为向渲染窗口发送消息：

app.on('ready', async () => {
    createWindow().then((win) => {
        setupIpcHandlers();
        const settingsPath = path.join(app.getPath('userData'), 'settings.json');
        fs.readFile(settingsPath, 'utf8', (err, data) => {
            const settingsData = err ? {} : JSON.parse(data);
            // 向渲染窗口发送配置数据
            win.webContents.send("init-app", settingsData);
        });
    });
})

步骤2：在渲染进程监听IPC事件并更新Store #

在渲染进程的入口文件（如main.js）或根组件（如App.vue）中监听init-app事件，调用Store mutation：

// 渲染进程代码
import { ipcRenderer } from 'electron';
import store from './store';

// 监听主进程发来的初始化消息
ipcRenderer.on('init-app', (event, settingsData) => {
    console.log("Init app from renderer", settingsData);
    store.commit('updateSettings', settingsData);
});

// 初始化Vue应用
createApp(App).use(store).mount('#app');

其他实现方案 #

方案1：渲染进程主动请求配置（推荐） #

渲染进程启动时主动向主进程请求配置，主进程读取后返回，渲染进程再更新Store。这种方式更符合Electron的IPC通信规范，也便于后续扩展配置的修改/保存逻辑。

主进程代码：

import { ipcMain } from 'electron';
import fs from 'fs/promises';
import path from 'path';
import { app } from 'electron';

// 注册获取配置的IPC handler
ipcMain.handle('get-app-settings', async () => {
    const settingsPath = path.join(app.getPath('userData'), 'settings.json');
    try {
        const data = await fs.readFile(settingsPath, 'utf8');
        return JSON.parse(data);
    } catch (err) {
        // 配置文件不存在时返回默认值
        return {};
    }
});

渲染进程代码：

import { ipcRenderer } from 'electron';
import store from './store';

// 加载配置并初始化Store
async function initAppSettings() {
    const settingsData = await ipcRenderer.invoke('get-app-settings');
    store.commit('updateSettings', settingsData);
}

// 先加载配置再挂载Vue应用，确保页面初始化时配置已就绪
initAppSettings().then(() => {
    createApp(App).use(store).mount('#app');
});

方案2：使用预加载脚本（Preload） #

通过Electron的预加载脚本暴露配置数据到渲染进程的全局对象，渲染进程直接读取全局对象并更新Store。这种方式适合简单的配置场景，避免频繁IPC通信。

预加载脚本（preload.js）：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    getAppSettings: () => ipcRenderer.invoke('get-app-settings')
});

主进程配置预加载：

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js') // 指定预加载脚本
        }
    });
    // ...其他窗口配置
}

渲染进程代码：

async function initAppSettings() {
    const settingsData = await window.electronAPI.getAppSettings();
    store.commit('updateSettings', settingsData);
}

initAppSettings().then(() => {
    createApp(App).use(store).mount('#app');
});

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