老师，请教一个关于使用VueX里面数据的问题

Question

关于Store里面的值，

如果直接点，计算属性就可以监听到值发生了变化

const cartList = store.state.cartList

如果直接解构，计算属性也可以监听其变化

const { cartList } = store.state

如果用toRefs包裹也会监听到变化

const { cartList } = toRefs(store.state)

老师，这是为什么？不是说过Vuex会将数据转化成reactive包裹的数据，需要用toRefs解构吗？为什么这三种做法一点区别也没有？如果以后我要用状态管理里面的值，我应该用哪种，怎么用，老师？

Answer 1

Dell 2021-03-20 20:54:30

这是因为它做了很多的兼容，每一层都变成了一个reactive 数据，我建议还是用 toRefs这样标准的使用方式

• 提问者 目訫 #1

  明白了，谢谢老师的指导

• weixin_慕尼黑2291373 回复 提问者 目訫 #2

  想问一下用解构的方法之后，逻辑代码是怎么样的，想借鉴一下，我直接解构return出去，但是count数量没有变化

• weixin_慕前端5001913 回复 weixin_慕尼黑2291373 #3

  怎么我用toRefs解构，计算属性监听不到变化，我理解的是toRefs会解构出来的响应性数据再包裹一层代理，相当于指向指针的指针，感觉没有必要

Answer 2

慕用4509656 2022-07-21 19:28:05

如果vux中state中的值是预先定义好的，那么就不需要toRefs，因为预先定义的都是响应式state

如果需要动态的添加state中一些数据结构，那么后添加的数据都不是响应式的，就需要用toRefs包裹。