Pinia——Getters

---

什么是 Getter

Getter 完全等同于 Store 状态的计算值，在 defineStore() 中的 getters 属性中定义
当它接收“状态”作为第一个参数时，鼓励箭头函数的使用

export const useStore = defineStore('main',{
    state:() => ({
        counter:0 
    }),
    getters:{
        doubleCount:(state) => state.counter * 2    
    }
})

getter 只会依赖状态，可能会使用到其他 getter，因此可以在定义常规函数时通过 this 访问到整个 store 的实例

export const useStore = defineStore('main',{
    state:() => ({
        counter:0    
    }),
    getters:{
        // 自动将返回类型推断为 Number
        doubleCount(state) {
            return state.counter * 2        
        },
        // 返回类型必须明确设置
        doublePlusOne():number {
            return this.counter *2 + 1        
        }    
    }
})

在使用 this 访问时，需要定义返回类型（在 TypeScript 中），这是因为 TypeScript 中的一个已知限制
这不会影响使用箭头函数定义的 getter，也不会影响不使用 this 的 getter

访问其他 getter

与计算属性一样，可以组合多个 getter。通过 this 访问任何其他 getter

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
    doubleCountPlusOne() {
      // 通过 this 访问任何其他 getter
      return this.doubleCount + 1
    },
  },
})

将参数传递给 getter

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

export const useStore = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

并在组件中使用：

<script>
export default {
  setup() {
    const store = useStore()

    return { getUserById: store.getUserById }
  },
}
</script>

<template>
  <p>User 2: {{ getUserById(2) }}</p>
</template>

请注意！！！在执行此操作时，getter 不再缓存，它们只是调用的函数

访问其他 Store 的 getter

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

import { useOtherStore } from './other-store'

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