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)

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值