vuex 中的响应式坑

我们都知道，vuex是vue中很重要的一部分，每当涉及到数据在多个页面都要用到时，而且页面的层级关系相对来说比较复杂是，那样使用传统的组件之间传值方法就显得比较麻烦了。比如来说我前几天使用vuex这个大管家来放购物车数组时，然后到后来将商品push到购物车数组中cart，然后到页面上修改商品数量时，发现页面上的数字没发生变化，但是监听vuex状态改变的devtools中的数据改变了，可把我愁死了。到后来我才知道如果想要做到响应式，必须要使用 Vue.set() 来添加型属性，否则只有 一初始化时就定义在state中的那些属性才是响应式的；
数组和对象都可以用Vue.set(),既可以用来添加属性，也可以用来修改属性
数组：Vue.set(arr,index,123) index代表索引，将所以为index的修改为123
对象：Vue.set(obj,‘newName’,‘fuao’) 添加一个新的属性 newName ， 值为 fuao

Vue.set(vm.userInfo,‘address’,‘beijing’)
此时就是在不改变地址引用 就可以直接改变数据 并且渲染在页面上

vm.$set(vm.userInfo,‘address’,‘beijing’) 也可以实现一样的效果

对于列表 上述两种set用法都可以实现改变数据 渲染在网页上
Vue.set(vm.userInfo,1,5)
vm.$set(vm.userInfo,2,10)