一、情景描述

我们学习了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包裹

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐