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和https://vuex.vuejs.org/guide/mutations.html似乎是这样做的原因，因此我不完全了解是什么原因造成的。

Answer 1

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

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

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

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

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

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

Vuex Electron：提交突变时发生异常

1 个答案: