使用vuex编译按钮点击加一,为什么在app.vue界面获取的{{$store.state.count.sum}}不会动态更新呢?
app.vue代码
<div>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
```javascript
methods:{
// toggleTotalPrice() {
// this.isShowTotalPrice = !this.isShowTotalPrice;
// },
increment() {
this.$store.dispatch('add',this.n)
}
},
state:{
user:{
data:{
name:'王二',
age:12
},
},
message:'',
sum:0
},
mutations: {
updateMessage(state,value) {
state.message = value
},
ADD(state,value) {
state.sum += value;
console.log(state.sum)
}
},
actions: {
add(context,value) {
context.commit('ADD',value)
}
}
```
$store.state.sum试试
推荐你使用computed进行状态的监听
<div>{{sum}}</div>
computed: {
sum: function() {
return this.$store.state.count.sum
}
}
你并没有定义count,你应该是使用$store.state.sum