Pinia 中的 Getters：派生状态的艺术

Pinia 中的 Getters：派生状态的艺术

在使用 Pinia 管理状态时，我们经常会遇到一种情况：直接存储在 Store 中的数据可能并不是我们最终需要的格式。例如，你可能需要对数据进行加工、转换或计算后才能使用。这种情况下，直接修改 state 是不合适的，因为 state 应该保持纯净，而派生状态的处理正是 getters 的用武之地。

那么，什么是 getters？如何使用它们来处理派生状态呢？接下来，我们将通过具体的例子来探讨 getters 的使用方法和优势。

问题情景：对数据不满意怎么办？

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

JavaScript复制

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    sum: 1, // 初始值为 1
    school: '中国人大'
  })
});

现在，你希望对这些数据进行一些加工：

1. 放大计数值：将 sum 的值放大 10 倍。

2. 转换学校名称为大写：将 school 的值转换为大写形式。

如何实现这些需求呢？

解决方案：使用 Getters

getters 是 Pinia 中用于派生状态的工具，类似于 Vue 中的计算属性（computed properties）。它们可以根据 state 中的数据动态计算出新的值，并且是响应式的。

1. 定义 Getters

在 Store 中定义 getters 的方式有两种：

1. 直接返回值：适用于简单的派生逻辑。

2. 使用函数：适用于更复杂的逻辑。

示例 1：直接返回值

JavaScript复制

export const useCounterStore = defineStore('counter', {
  state: () => ({
    sum: 1,
    school: '中国人大'
  }),
  getters: {
    bigSum: (state) => state.sum * 10, // 将 sum 放大 10 倍
    upperSchool: (state) => state.school.toUpperCase() // 将 school 转换为大写
  }
});

适用场景：

• 简单的派生逻辑，如数值计算或字符串处理。

示例 2：使用函数

如果需要更复杂的逻辑，可以将 getters 定义为函数，并在其中使用 this 访问 state 或其他 getters。

JavaScript复制

export const useCounterStore = defineStore('counter', {
  state: () => ({
    sum: 1,
    school: '中国人大'
  }),
  getters: {
    bigSum() {
      return this.sum * 10; // 使用 this 访问 state
    },
    upperSchool() {
      return this.school.toUpperCase(); // 使用 this 访问 state
    }
  }
});

适用场景：

• 需要访问多个 state 或其他 getters 的复杂逻辑。

2. 使用 Getters

在组件中，你可以像访问 state 一样直接访问 getters。它们是响应式的，当依赖的 state 发生变化时，getters 的值也会自动更新。

组件示例：

vue复制

<template>
  <div>
    <p>当前计数：{{ counterStore.sum }}</p>
    <p>放大 10 倍后的计数：{{ counterStore.bigSum }}</p>
    <p>学校名称：{{ counterStore.school }}</p>
    <p>学校名称大写：{{ counterStore.upperSchool }}</p>
  </div>
</template>

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

3. Getters 的优势

• 响应式：getters 是响应式的，当依赖的 state 发生变化时，getters 的值也会自动更新。

• 复用性：getters 可以在多个组件中复用，避免重复逻辑。

• 灵活性：可以通过 state 或 this 访问状态，支持复杂的派生逻辑。

4. 注意事项

• 类型声明：在 TypeScript 中，如果 getters 的返回值类型不明确，可能会导致类型错误。因此我们可以通过显式声明类型来解决：

  JavaScript复制

upperSchool(): string {
  return this.school.toUpperCase();
}

• 性能优化：getters 的结果会被缓存，只有当依赖的 state 发生变化时才会重新计算。这有助于优化性能。

总结

getters 是 Pinia 中用于派生状态的强大工具，它们可以帮助你对数据进行加工、转换或计算，同时保持响应式特性。通过合理使用 getters，你可以：

1. 简化逻辑：将复杂的派生逻辑封装在 getters 中。

2. 提高复用性：在多个组件中复用 getters。

3. 优化性能：利用缓存机制减少不必要的计算。