从组件访问Vuex存储中的突变体会产生未知突变类型错误

Question

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

然而，我在激活Vuex商店中的突变体时遇到了问题。当我试图激活突变体时，我收到一个错误：

[vuex] unknown mutation type: changeNumber

changeNumber是Vuex存储中将number更改为随机数的突变子。

以下是我的代码。我可以从Vue组件使用this.$store.state.number直接访问存储，但似乎无法使用this.$store.commit('changeNumber')激活突变子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中查看此代码。如有任何帮助，我们将不胜感激。

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);
}
}
});