Vue 3+Vuex 4+Electron技术栈下实现Vuex状态持久化的最佳方案咨询

一、依赖选型与安装 #

无需使用适配Vue2的老旧库，直接采用electron-store作为底层存储能力（Electron官方生态维护的成熟存储方案，兼容所有新版本Electron），自行编写Vuex4插件适配持久化逻辑，灵活度更高。
首先安装依赖：

npm install electron-store

二、主进程配置 #

在Electron主进程入口文件中初始化electron-store，并注册IPC通信接口供渲染进程读写存储数据：

// 主进程 main.js 代码
import { app, BrowserWindow, ipcMain } from 'electron'
import Store from 'electron-store'

// 初始化存储实例，可配置加密、存储路径等参数
const store = new Store({
  name: 'user-config', // 存储文件名，最终生成user-config.json
  defaults: { // 默认配置，首次启动无本地存储时生效
    vuexState: {
      settings: {
        showWelcome: true // 对应需要持久化的是否展示欢迎页配置
        // 其他需要默认的用户配置都可以放在这里
      }
    }
  }
})

// 注册读存储的IPC接口
ipcMain.handle('get-store', () => {
  return store.get('vuexState')
})

// 注册写存储的IPC接口
ipcMain.handle('set-store', (_, payload) => {
  store.set('vuexState', payload)
  return true
})

// 原有创建窗口的逻辑保持不变即可

三、Preload脚本配置 #

因为Electron默认开启上下文隔离，需要在preload脚本中把读写存储的方法暴露给渲染进程：

// preload.js 代码
import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
  getVuexStore: () => ipcRenderer.invoke('get-store'),
  setVuexStore: (payload) => ipcRenderer.invoke('set-store', payload)
})

确保创建窗口的配置里preload路径正确，和你当前模板的原有配置保持一致即可。

四、编写Vuex4持久化插件 #

在你的Vuex store文件中编写持久化插件，实现变更自动存储、启动自动加载逻辑：

// store/index.js 代码
import { createStore } from 'vuex'

// 持久化插件
const vuexPersistPlugin = (store) => {
  // 每次mutation提交后，同步需要持久化的state到本地存储
  store.subscribe((mutation, state) => {
    // 这里可以筛选只持久化需要的模块，比如只存settings模块，不用存整个state，提升性能
    const persistState = {
      settings: state.settings
    }
    window.electronAPI.setVuexStore(persistState)
  })
}

// 初始化store
export const store = createStore({
  plugins: [vuexPersistPlugin],
  state() {
    return {
      settings: {
        showWelcome: true // 要和主进程的默认配置保持一致
        // 其他全局state
      }
    }
  },
  mutations: {
    // 修改欢迎页展示状态的mutation示例
    setShowWelcome(state, value) {
      state.settings.showWelcome = value
    }
    // 其他你的mutation逻辑
  },
  actions: {
    // 应用启动时调用这个action，加载本地存储的配置替换state
    async loadPersistState({ commit, state }) {
      const localState = await window.electronAPI.getVuexStore()
      // 合并本地存储的配置和默认配置，避免版本更新新增配置项丢失
      Object.assign(state.settings, localState.settings)
    }
  }
  // 其他你的modules、getters等逻辑
})

五、应用启动时加载本地存储 #

在Vue应用入口文件中，初始化完store之后先调用加载持久化数据的逻辑：

// main.js （Vue渲染进程入口）代码
import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'

const app = createApp(App)
app.use(store)

// 先加载本地存储的配置，再挂载应用
store.dispatch('loadPersistState').finally(() => {
  app.mount('#app')
})

六、业务侧使用示例 #

直接正常调用Vuex的mutation修改配置即可，会自动持久化：

<!-- 设置页组件示例 -->
<template>
  <div class="setting-item">
    <input 
      type="checkbox" 
      v-model="showWelcome" 
      @change="updateShowWelcome"
    />
    <label>启动时展示欢迎页</label>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const showWelcome = computed(() => store.state.settings.showWelcome)

const updateShowWelcome = (e) => {
  store.commit('setShowWelcome', e.target.checked)
}
</script>

注意事项 #

• 仅持久化必要的state字段，不要全量存储整个Vuex的state，避免存储冗余数据和性能损耗
• 如果有复杂嵌套的state对象，替换的时候要做深合并，不要直接全量覆盖，防止应用迭代新增配置项后旧用户本地存储没有对应字段导致报错
• 可以根据需求对存储的内容做加密、校验逻辑，避免用户手动修改存储的json文件导致异常

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