toRefs、storeToRefs实际应用

目录

一、问题

二、原因及解决方法

三、总结

---

一、问题

1. 通过store中的一个变量来控制  是否显示某条数据

2. 直接使用v-if，但是发现很相似的写法。一个地方有问题，一个地方没有问题。很是奇怪。

二、原因及解决方法

1.写法一 ： 通过props传递 store中的数据, 控制 div显示正常

2. 直接在当前组件中使用store中的数据判断：修改hiddenPintuan的值，页面无法及时更新，失去响应式

3. 只测试了 写法一，以为响应式不会丢失。为什么会这样呢？ 

4.仔细分析,最终得出结论

        1）写法一：因为useUserStore从父组件中传递到子组件（写在template中的props），根据vue的响应式原理为了简化对dom操作的代码，此时useUserStore在底层是被proxy代理的，所以当useUserStore的属性变化时会动态更新，所以 useUserStore.hiddenPintuan 保持了响应式。

   2）写法二:因为直接解构了useUserStore中的属性，并且没有子组件使用到useUserStore，所以失去了响应式

   3）写法一如果 变更成 直接使用解构的hiddenPintuan也是无效的，因为解构使得hiddenPintuan和useUserStore失去了联系

5.解决方法

1. 对于 store使用 storeToRefs解构数据，就能保持响应式. 

    当然使用ToRefs也可以，只是因为方法不需要保持响应式，storeToRefs对方法做了过滤，避免了一些意外的错误，性能更好一些

2.对于普通数据使用 ToRefs解构数据，来保持响应式

三、总结

1.恍然大悟🤐，实践才能知道知识的真实含义

2. storeToRefs,toRefs都是用来保证解构 reactive数据时，解构出来的数据能够保持响应式。storeToRefs是专门给 store数据使用的, 解构时不会为方法添加响应式

3. props传参携带原始 reactive数据（直接传reactive对象或者reactiveObj.xxx）时，能够自动保持响应式

/*

希望对你有帮助！

如有错误,欢迎指正,谢谢！

*/