以下是 Pinia 中 getters 的详细介绍：

基本概念

Getters 是 Pinia 中的计算属性，用于从 state 派生值

• 自动缓存计算结果（类似 Vue 的 computed）
• 支持组合多个 getter
• 可通过 this 访问整个 store 实例

定义方式

选项式 API

defineStore("store", {
  state: () => ({ count: 1 }),
  getters: {
    double: (state) => state.count * 2,
  },
});

组合式 API

defineStore("store", () => {
  const count = ref(1);
  // getter
  const double = computed(() => count.value * 2);
  return { count, double };
});

使用

给 getter 传参

getter 的参数默认值是 state，因此我们可以用高阶函数来返回一个函数，用来接收参数。

export const useUserListStore = defineStore("userList", {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId);
    },
  },
});

访问其他 getter

可以通过 this 来访问

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

访问其他 store

因为 store 是全局可用的，因此我们在当前 store 里导入其他 store，即可访问。

import { useOtherStore } from "./other-store";

export const useStore = defineStore("main", {
  getters: {
    otherGetter(state) {
      const otherStore = useOtherStore();
      return state.localData + otherStore.data;
    },
  },
});

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24