我们在vuex中操作数据时遇见视图不更新的情况

原理：去vue的官网看就行了跳转

使用方法：Vue.set(target,propertyName,value)

                target:要更改的数据（一般是响应式对象） 例：state.data

                property:这个对象中的子对象或者属性

                value：你想要赋的值

使用实例：

(可以直接下拉到使用Vue.set后的内容)

页面内容

<template>
<div class="">
  <h5>{{$store.state.allone}}</h5>
  <button @click="allone">+1</button>
</div>
</template>
<script>
export default {
data(){
return{}
},
methods: {
  allone(){
    this.$store.commit('allone')
  }
//方法
}
</script>

vuex中的内容

state(){
    addone:{}
},
mutations: {
allone(state){
      if(!state.addone.num){
        state.addone.num=1
      }else{
        state.addone.num++
      }
      
      console.log(state.addone.num);
    }
}

 此时可以看到数据已经改变了，但是试图还是空的 ，因为addone一开始就为空

 这个时候我们只需要使用Vue.set就可以了

state(){
    addone:{}
},
mutations: {
allone(state){
      if(!state.addone.num){
        //state.addone.num=1
        Vue.set(state.addone,"num",1)
      }else{
        state.addone.num++
      }
      
      console.log(state.addone.num);
    }
}

 看成品