前言

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

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

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

ES 解构方式（错误的）

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

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

export default system

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

<template>
  <h1>{{ vuex.name }}</h1>
  <h2>A: {{ A }}</h2>
  <h2>B: {{ B }}</h2>
  <h2>C: {{ C }}</h2>
  <h2>D: {{ D }}</h2>
</template>

<script setup>
// 获取状态管理(system)
import Store from './store/index.js'
const vuex = Store().system

// 解构 store
const { A, B, C, D } = vuex

// 如果不解构呢?
// const A = vuex
// const B = vuex
// ...
</script>

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

storeToRefs（正确的）

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

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

---

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

<template>
  <h1>{{ vuex.name }}</h1>
  <h2>A: {{ A }}</h2>
  <h2>B: {{ B }}</h2>
  <h2>C: {{ C }}</h2>
  <h2>D: {{ D }}</h2>
  <button @click="edit()">修改数据</button>
</template>

<script setup>
// 获取状态管理(system)
import Store from './store/index.js'
const vuex = Store().system

// 解构 store
const { A, B, C, D } = vuex

// 修改解构后的数据
const edit = () => {
  vuex.A = '我是修改后的数据！'
}
</script>

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

---

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

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

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

<template>
  <h1>{{ vuex.name }}</h1>
  <h2>A: {{ A }}</h2>
  <h2>B: {{ B }}</h2>
  <h2>C: {{ C }}</h2>
  <h2>D: {{ D }}</h2>
  <button @click="edit()">修改数据</button>
</template>

<script setup>
// 第一步：引入解构时使用的API
// 它是个函数，参数为要解构的数据
import { storeToRefs } from 'pinia'

// 获取状态管理(system)
import Store from './store/index.js'
const vuex = Store().system

// 第二步：使用 storeToRefs 进行解构
const { A, B, C, D } = storeToRefs(vuex)

// 修改解构后的数据
const edit = () => {
  vuex.A = '我是修改后的数据！'
}
</script>

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

总结

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

SEO

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