用Vuex设置数值

Question

我目前正在努力学习Vuex。

我想让 number-每次点击元素时，使用mutation(changeNumber).

let state = {
  counter: 0,
  someOtherValue: 'Text'
}

let changeNumber = {
  increment(state) {
    state.counter += 1
  }
}

let store = new Vuex.Store({
  changeNumber,
  state
})

Vue.component('counter-button', {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  },
  template: `<input :value="$store.state.counter" @click="$store.commit('increment')" type="button">`
})

Vue.component('some-component', {
  computed: {
    someOtherValue() {
      return this.$store.state.someOtherValue
    }
  },
  template: '<div>{{ someOtherValue }}</div>'
})

new Vue({
  el: '#app',
  store,
  template: '<some-component></some-component>',

})

我的代码被机器人改正了，却被返回两个错误。我的代码有什么问题？

Err) clicking on the paragraph causes the number value to change
Err) triggering the changeNumber mutation causes the number value to change

Answer 1

你应该把突变传递给存储在键下的商店。mutations 而不是 changeNumber. 请注意，在你的代码中 changeNumber 不是突变。increment 是实际的变异。

let mutations = {
  increment(state) {
    state.counter += 1
  }
}

let store = new Vuex.Store({
  mutations,
  state
})