目录

• • 前言
  • ES 解构方式（错误的）
  • storeToRefs（正确的）
  • 总结
  • SEO

前言

解构啥意思呢？大家应该对 ES 传统方式解构非常了解，相同的，解构 store 也是如此。

假设你在状态管理仓库中定义很多很多数据，注意啊，当你页面中需要使用仓库中的多个数据时，取值就会变得非常麻烦，

你想想一行代码只能取一个 ，这时候啊，大家就会想到解构，仅需一行代码，一次性获取所有的数据。

ES 解构方式（错误的）

先简单来个，写点数据进去。

import { defineStore } from 'pinia'
const system = defineStore('system', {state: () => {return {name: '我是状态管理下的数据',// 咱们随便写点数据进去A: '刘华强',B: '郝老板',C: '鸡你太美',D: '这鸡汤十分滴珍贵'}},
})export default system

好，数据准备好了，我们开始解构。

可以看到，解构确实很方便。

storeToRefs（正确的）

这种传统 ES 解构，会让其失去响应式，也就是说你虽然这样解构方便了，但是要付出的代价就是这些数据将失去响应式。

这是由于 Pinia 的状态管理仓库，底层是通过 Proxy 代理对象实现的，每个仓库就是一个代理对象，所以说解构才会让其失去响应式，不信你可以自己去打印一下状态管理仓库，看看是不是 Proxy 代理对象类型。

考虑到有的同学可能不太理解什么是失去响应式啊，咱们来实际搞一把。

点击修改没有反应，也没有报错。这就是典型的因为解构所导致的失去响应式的案例。

那么我既想要解构，又不想失去响应性，有没有啥解决方案啊？

有！人家 Pinia 大菠萝早就想到了这个问题，所以出了一个叫 storeToRefs 的 API，它可以使解构出来的数据同时具有响应式！

废话不多说，咱们修改一下刚才的例子，让其生效。

我点击修改数据按钮，已经修改了，说明解构并没有让其失去响应式。

总结

如果你直接对 store 数据进行解构，会破坏数据的响应，所以 Pinia 大菠萝提供了 storeToRefs 用来进行解构。

SEO

Pinia 如何解构 store？pinia storeToRefs 使用教程，Vue3 - Pinia 状态管理，解构 store（Pinia storeToRefs API 详细使用教程）。