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

【问题标题】：Vuex Electron: Exception when committing mutationVuex Electron：提交突变时出现异常
【发布时间】：2019-05-02 05:29:42
【问题描述】：

我正在使用 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 和 https://vuex.vuejs.org/guide/mutations.html，它们似乎正在这样做。

【问题讨论】：

使用this.$store.commit(/* ... */)方法直接导入store。
在此之前确保您注册了商店。
我遇到了同样的问题，但我从 main.js 中提交到商店以将 ipcRenderer 内容转发到商店。我也不明白为什么我应该得到一个例外......

标签： javascript vue.js electron vuex electron-vue

【解决方案1】：

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

项目的README.md 很清楚这一点：

在渲染器进程中调用动作需要使用 dispatch 或 mapActions。不要使用提交，因为通过提交触发的操作不会在进程之间共享。

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

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

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

【讨论】：