使用 Vuex 设置值

Question

我目前正在尝试学习 Vuex。

我希望每次使用突变（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
})