博客站

在 Pinia 中，getters 用于从 state 中派生出新的数据，类似于 Vue 组件中的 computed 属性。getters 可以帮助你封装复杂的逻辑，使得状态管理更加清晰和高效。

Getters 的作用

1. 派生状态：从 state 中派生出新的数据，避免在多个地方重复计算。
2. 封装逻辑：将复杂的计算逻辑封装在 getters 中，使代码更易维护。
3. 响应式：getters 是响应式的，当依赖的 state 发生变化时，getters 会自动更新。

如何使用 Getters

1. 定义 Getters

在定义 Store 时，可以通过 getters 属性来定义计算属性。每个 getter 是一个函数，接收 state 作为参数，并返回计算后的值。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // 定义一个 getter，返回 count 的两倍
    doubleCount: (state) => state.count * 2,

    // 定义一个 getter，使用其他 getter
    doubleCountPlusOne() {
      return this.doubleCount + 1;
    },
  },
});

2. 在组件中使用 Getters

在组件中，可以通过 Store 实例直接访问 getters，就像访问普通属性一样。

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <p>Double Count Plus One: {{ counterStore.doubleCountPlusOne }}</p>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      counterStore,
    };
  },
};
</script>

3. 带参数的 Getters

如果需要传递参数，可以将 getter 定义为一个返回函数的函数。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // 带参数的 getter
    countPlus: (state) => {
      return (num) => state.count + num;
    },
  },
});

在组件中使用带参数的 getter：

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Count Plus 5: {{ counterStore.countPlus(5) }}</p>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      counterStore,
    };
  },
};
</script>

4. 在 Getters 中使用其他 Getters

在 getters 中，可以通过 this 访问其他 getters。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    doubleCountPlusOne() {
      return this.doubleCount + 1;
    },
  },
});

5. 在组合式 API 中使用 Getters

如果使用组合式 API 定义 Store，getters 可以通过 computed 来实现。

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);

  // 使用 computed 定义 getters
  const doubleCount = computed(() => count.value * 2);

  return {
    count,
    doubleCount,
  };
});

Getters 的特点

1. 缓存：getters 的结果会被缓存，只有当依赖的 state 发生变化时才会重新计算。
2. 响应式：getters 是响应式的，可以在模板中直接使用。
3. 组合性：getters 可以依赖其他 getters，方便构建复杂的计算逻辑。

总结

Pinia 的 getters 主要用于从 state 中派生出新的数据，封装复杂的计算逻辑，并提供响应式的计算结果。通过 getters，你可以使代码更加清晰、高效，并避免重复计算。在组件中使用 getters 非常简单，直接通过 Store 实例访问即可。