Getter

Getter 完全等同于 Store 状态的 计算值。

意味着，getter就和vuex里面的computed一样。它接收一个参数，参数就是state。

//src/store/index.ts
import { defineStore } from 'pinia'
export const useCounters = defineStore('counter',{
  state: () => {
      return{
          count: 100,
          people: 4,
      }
  },
  getters:{
      getAllCount: state => state.count * state.people
  }
})

//src/App.vue
<script>
import { useCounters } from '@/store'
export default {
  setup() {
    const useCounter = useCounters();
    return {
      useCounter,
    }
  },
}
</script>
<template>
  <div>
    今天种了多少颗苹果树：{{ useCounter.getAllCount }}颗。
  </div>
</template>

当然getters除了参数可以去访问state，也可以使用this，去访问到 整个 store 的实例，但是需要定义返回类型（在 TypeScript 中）

import { defineStore } from 'pinia'
export const useCounters = defineStore('counter',{
    state: () => {
        return{
            count: 100,
            people: 4,
        }
    },
    getters:{
        getAllCount: state => state.count * state.people,
        // 返回类型必须明确设置
        doubleCount(): number {
            return (this.count * this.people) * 2 
        },
    }
})

一、访问其他 getter

与计算属性一样，您可以组合多个getter。 通过this 访问任何其他 getter。即使您不使用 TypeScript，您也可以使用 JSDoc 提示您的 IDE 类型：

import { defineStore } from 'pinia'
export const useCounters = defineStore('counter',{
    state: () => {
        return{
            count: 100,
            people: 4,
        }
    },
    getters:{
        getAllCount: state => state.count * state.people,
      // 这里需要我们自己添加类型（在 JS 中使用 JSDoc）。 我们还可以
      // 使用它来记录 getter
      /**
       * 返回计数器值乘以二。
       *
       * @returns {number}
       */
        doubleCount(): number {
            return this.getAllCount * 2 
        },
    }
})

二、将参数传递给 getter

Getters 只是幕后的 computed 属性，因此无法向它们传递任何参数。 但是，您可以从 getter 返回一个函数以接受任何参数：

import { defineStore } from 'pinia'
export const useUserStores = defineStore('counter',{
    state: () => {
        return{
            users: [
                {
                    id: 100001,
                    name: '大宝',
                    sex: 'male'
                },
                {
                    id: 100002,
                    name: '小宝',
                    sex: 'male'
                }
            ]
        }
    },
    getters:{
        getUserById: (state) => {
            return (userId) => state.users.find((user) => user.id === userId)
        },
    }
})

<script>
import { useUserStores } from '@/store'
export default {
  setup() {
    const useUserStore = useUserStores();
    return {
      useUserStore,
    }
  },
}
</script>
<template>
  <div>
    用户2的id是：{{ useUserStore.getUserById(100002) }}。
  </div>
</template>

请注意，在执行此操作时，getter 不再缓存，它们只是您调用的函数。 但是，您可以在 getter 本身内部缓存一些结果

二、访问其他 Store 的getter

要使用其他存储 getter，您可以直接在 better 内部使用它：

import { defineStore } from 'pinia'
import { useOtherStores } from './other-store'
export const useUserStores = defineStore('counter',{
    state: () => {
        return{
            count: 100
        }
    },
    getters:{
        getAllCount: (state) => {
            const otherData = useOtherStores();
            return state.count * otherData.size
        },
    }
})

总结：Pinia的getters，就是vuex computed的替身。pinia好的地方就是完整的 TypeScript 支持，所以访问this 记得添加返回类型即可。