vuex的使用中不能动态渲染

使用vuex编译按钮点击加一,为什么在app.vue界面获取的{{$store.state.count.sum}}不会动态更新呢?

img

app.vue代码

求和结果为:{{$store.state.count.sum}}

<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