vue3：17、Pinia的storeToRefs

在组件中解构store中的数据时，数据会丢失响应式。此时需要用到storeToRefs

 

目录

 storeToRefs的使用

 使用vue的toRefs。【不推荐使用】

使用pinia的storeToRefs【推荐使用】

---

import {ref, reactive, toRefs } from 'vue';
import {storeToRefs} from 'pinia'
//引入useCountstore
import {useCountstore} from '@/store/count'
//使用useCountstore，得到一个专门保存count相关的store
const countstore = useCountstore()

/** toRefs会将store中的所有东西用ref包裹，比如：数据、方法、...*/
// const {sum,school,address} = toRefs(countstore)
// console.log('!!!!!',toRefs(countstore))

/**storeToRefs 只会将store中的数据用ref包裹 */
const {sum,school,address} = storeToRefs(countstore)
console.log('!!!!!',storeToRefs(countstore))

 使用vue的toRefs。【不推荐使用】

【toRefs会将store中的所有东西用ref包裹，比如：数据、方法、...。】

使用pinia的storeToRefs【推荐使用】

【storeToRefs只关注store中的数据】