Vue3：用Pinia的storeToRefs结构赋值store数据

一、情景描述

我们学习了Pinia之后，知道，数据是配置在Pinia的state里面的。
那么，如果有多个字段需要取出来使用，并且不丢失数据的响应式，如何优雅的操作了？

这里就用到了Pinia的storeToRefs函数

二、案例

引入

  import {storeToRefs} from 'pinia'

结构赋值

  // 使用useCountStore，得到一个专门保存count相关的store
  const countStore = useCountStore()
  // storeToRefs只会关注sotre中数据，不会对方法进行ref包裹
  const {sum,school,address} = storeToRefs(countStore)

三、比对

在Vue3中，有一个toRefs函数
那么，为什么不用这个函数了？

  console.log('!!!!!',storeToRefs(countStore))
  console.log('222222',toRefs(countStore))

可以看出，storeToRefs只会关注sotre中数据，不会对方法进行ref包裹