Question

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

但是，我在激活Vuex商店中的mutator时遇到麻烦。尝试激活增效器时收到错误消息：

[vuex] unknown mutation type: changeNumber

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

以下是我的代码。我可以使用Vue组件中的this.$store.state.number直接访问商店，但似乎无法使用changeNumber激活变种器this.$store.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);
    }
  }
});

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

1 个答案: