时间戳

首页 > 解决方案 > Vuex Electron：提交突变时出现异常

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

问题描述

我正在使用 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这样做。

标签： javascriptvue.jselectronvuexelectron-vue

解决方案

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

该项目的README.md清楚地表明了这一点：

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

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

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

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

推荐阅读