Vuex Electron：提交突变时出现异常

Question

我正在使用 Vue 和 Vuex 编写一个 Electron 应用程序。

我的店铺如下(counter.js):

const state = {
  main: 5
};

const mutations = { // synchronous tasks
  INCREMENT_MAIN_COUNTER (state) {
    state.main++;
  }
};

const getters = {
  count: (state) => {
    return state.main;
  }
};

export default {
  state, getters, mutations
}

我的Vue组件如下(LandingPage.vue):

<template>
  <div id="count-box">
    {{count}}
    <button @click="pressed">Increment counter</button>
  </div>
</template>

<script>
  import counter from '../store';

  export default {
    name: 'landing-page',
    computed: {
      count: () => {
        return counter.getters.count;
      }
    },
    methods: {
      pressed: () => {
        counter.commit('INCREMENT_MAIN_COUNTER');
      }
    }
  };
</script>

当我点击按钮递增时，调用commit，并触发以下异常：

Uncaught Error: [Vuex Electron] Please, don't use direct commit's, use dispatch instead of this.
    at Store.store.commit (.../node_modules/vuex-electron/dist/shared-mutations.js:1)
    at VueComponent.pressed (LandingPage.vue?b116:20)
    at invoker (vue.esm.js?a026:2027)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?a026:1826)

我不明白到底是什么导致了这个，因为我一直在关注 https://www.youtube.com/watch?v=LW9yIR4GoVU and https://vuex.vuejs.org/guide/mutations.html，它似乎是这样做的。

Answer 1

请注意，您可能正在使用 vuex-electron 以便在所有进程（包括主进程）之间共享您的 vuex 存储。

项目的 README.md 对此很清楚：

In renderer process to call actions you need to use dispatch or mapActions. Don't use commit because actions fired via commit will not be shared between processes.

我想这背后的原因是 Vuex Electron 在后台使用 ipcMain and ipcRenderer 在主进程和渲染进程之间进行通信，并且两个 API 都是异步的。这里的重点是突变必须是纯函数并且没有副作用，而动作有。

我在更新现有代码库以使用现在使用 Vuex Electron 的最新版本 electron-vue 时遇到了同样的错误。根据您的需要，如果您不需要与其他进程共享您的商店或添加 "proxy" 调用突变的操作，您可以删除 Vuex Electron。

vuex 文档中的更多详细信息：

Vuex Electron：提交突变时出现异常

Vuex Electron: Exception when committing mutation

javascript

vue.js

electron

vuex

electron-vue