如何在 Pinia 中优雅地读取数据？storeToRefs

如何在 Pinia 中优雅地读取数据？storeToRefs

在使用 Pinia 管理状态时，我们经常会遇到一个问题：如何优雅地从 Store 中读取数据，同时保持数据的响应式特性？直接访问 Store 中的数据虽然简单，但可能不够优雅，尤其是在需要频繁读取多个状态时。那么，有没有更好的方式呢？

问题情景：直接读取数据的痛点

假设你正在开发一个 Vue 应用，其中包含一个计数器和一个情话列表。你已经定义了一个 Store 来管理这些状态：

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    sum: 0,
    school: '科大',
    address: '北京'
  })
});

// stores/talk.js
export const useTalkStore = defineStore('talk', {
  state: () => ({
    talkList: [
      { id: 1, content: '我爱你' },
      { id: 2, content: '我也爱你' }
    ]
  })
});

在组件中，你可能需要频繁读取这些状态：

<template>
  <div>
    <p>当前计数：{{ counterStore.sum }}</p>
    <p>学校：{{ counterStore.school }}</p>
    <p>地址：{{ counterStore.address }}</p>
    <ul>
      <li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useCounterStore, useTalkStore } from '@/stores';
const counterStore = useCounterStore();
const talkStore = useTalkStore();
</script>

这种直接读取的方式虽然可行，但存在一些问题：

1. 代码重复：每次读取数据都需要通过 storeName.stateName 的方式，代码显得冗余。

2. 失去响应式：如果直接解构状态，可能会导致数据失去响应式特性。

解决方案：使用 toRefs 和 storeToRefs

Pinia 提供了两种工具来解决这些问题：toRefs 和 storeToRefs。它们可以帮助我们优雅地读取数据，同时保持数据的响应式。

1. 使用 toRefs

toRefs 是 Vue 提供的一个工具，可以将响应式对象的属性转换为单独的 ref，从而保持响应式。

示例代码：

import { toRefs } from 'vue';
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
const { sum, school, address } = toRefs(counterStore);

优点：

• 解构状态：可以将状态解构为单独的 ref，使代码更简洁。

• 保持响应式：解构后的状态仍然是响应式的。

缺点：

• 代价较大：toRefs 会将 Store 中的所有属性（包括方法）都转换为 ref，可能导致不必要的性能开销。

2. 使用 storeToRefs

storeToRefs 是 Pinia 提供的一个工具，专门用于解构 Store 中的状态，同时忽略方法。它比 toRefs 更高效，因为它只关注状态。

示例代码：

import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
const { sum, school, address } = storeToRefs(counterStore);

优点：

• 高效：只关注状态，不处理方法，性能更好。

• 保持响应式：解构后的状态仍然是响应式的。

缺点：

• 仅适用于状态：不能用于解构 Store 中的方法。

3. 如何选择？

如果你只需要解构状态，并且希望保持响应式，推荐使用 storeToRefs。

如果你需要同时解构状态和方法，可以使用 toRefs，但要注意性能开销。

4. 实际应用示例

假设你需要在组件中读取和显示计数器的状态和情话列表，同时保持响应式。你可以这样实现：

<template>
  <div>
    <p>当前计数：{{ sum }}</p>
    <p>学校：{{ school }}</p>
    <p>地址：{{ address }}</p>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{ talk.content }}</li>
    </ul>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore, useTalkStore } from '@/stores';

const counterStore = useCounterStore();
const { sum, school, address } = storeToRefs(counterStore);

const talkStore = useTalkStore();
const { talkList } = storeToRefs(talkStore);
</script>

总结

在 Pinia 中，优雅地读取数据是提高开发效率和代码可维护性的重要环节。toRefs 和 storeToRefs 提供了强大的工具来实现这一目标。通过合理选择这两种工具，你简化代码：通过解构状态，减少冗余代码，保持响应式：确保解构后的状态仍然是响应式的。优化性能：使用 storeToRefs 只关注状态，避免不必要的性能开销。