javascript - 从组件访问 Vuex Store 中的 Mutator 会产生未知突变类型错误

Question

我的 Vuex 状态中有一个 number。我能够通过计算属性成功地在我的 Vue 组件中使用 number 。在那个 Vue 组件中，我有一个方法可以激活 Vuex 存储中的一个修改器。然后，此修改器将 number 的值更改为随机数。

但是，我在激活 Vuex 商店中的突变器时遇到了麻烦。当我尝试激活修改器时收到错误消息:

[vuex] 未知突变类型:changeNumber

changeNumber 是 Vuex 存储中的更改器，它将 number 更改为随机数。

以下是我的代码。我可以使用 Vue 组件中的 this.$store.state.number 直接访问商店，但似乎无法使用 this.$store 激活 mutator changeNumber .commit('changeNumber')。我仔细检查了我的语法并通读了多个教程，它们似乎都成功地使用了 this.$store.commit('mutation')。

var store = new Vuex.Store({
    state: {
    number: -1
  },
  getters: {
    getNumber: function(state) {
      return state.number;
    }
  },
  mutators: {
    changeNumber: function(state) {
        state.number = Math.floor(Math.random() * 10);
    }
  }
});

var vm = new Vue({
    el: '#app',
  store: store,
  computed: {
    number: function() {
        return this.$store.getters.getNumber;
    }
  },
  methods: {
    generate: function() {
        this.$store.commit('changeNumber');
    }
  }
});

我的 HTML 如下:

<div v-cloak id="app">
  <button v-on:click="generate">Generate</button>
  <h3>{{ number }}</h3>
</div>

这段代码可以在 JSFiddle 中查看 here ， 如果需要的话。任何帮助将不胜感激。

Answer 1

应该是mutations，不是mutators

var store = new Vuex.Store({
  state: {
    number: -1
  },
  getters: {
    getNumber: function(state) {
      return state.number;
    }
  },
  mutations: {
    changeNumber: function(state) {
        state.number = Math.floor(Math.random() * 10);
    }
  }
});