Javascript 在Vuex中更改存储中的值

我正在尝试学习Vuex，我一直在尝试使它成为可能，以便每次单击

p

-元素时，使用名为

changeNumber

的突变，数值都会发生变化。我还想使数值显示在

p

-元素中。到目前为止，这是我的代码，但我被卡住了：

let object = {

}

let state = {
  object,
  someArray: [],
  someBool: true,
  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>',

})

let对象={
}
让状态={
对象
someArray:[]，
是的，
柜台:0,，
someOtherValue:“文本”
}
让changeNumber={
增量（状态）{
state.counter+=1
}
}
let store=新的Vuex.store({
换号码，
状态
})
Vue.组件（“计数器按钮”{
计算：{
计数器（）{
返回此。$store.state.counter
}
},
模板：``
})
Vue.component（“某些组件”{
计算：{
someOtherValue（）{
返回此值。$store.state.someOtherValue
}
},
模板：“{{someOtherValue}}”
})
新Vue({
el:“#应用程序”，
商店，
模板：“”，
})

在

新建Vuex.Store（{options}）

中，不能将函数

更改编号

添加为选项

检查 它应该在

突变

内

如果将

changeNumber

替换为

突变

，您的解决方案将起作用

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

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

在

new Vuex.Store（{options}）

中，不能将函数

changeNumber

添加为选项

检查 它应该在

突变

内

如果将

changeNumber

替换为

突变

，您的解决方案将起作用

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

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