我们都知道,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)