Pinia（四）了解和使用getters

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

Getters

1. getters 就像计算属性一样, 通过 defineStore 的 getters 配置项来定义. 每一个 getter 都是一个函数, 这个函数接收 state 作为第一个参数, 官网鼓励使用箭头函数

   • export const userStore = defineStore('user', {
       state: () => {
         return {
           color: 'red' as string,
           userList: [] as UserInfo[],
           user: {
             name: 'tom',
             age: 18
           } as UserInfo | null
         }
       },
       getters: {
         doubleAge: (state) => {
           return state.user.age * 2;
         }
       }
     })
     

   • 大多数时间, getter 都仅仅依赖于 state, 但是有时候也会依赖其他 getter. 所以呢, 如果 getter 定义为非箭头函数就可以通过 this 拿到整个 store 实例, 但是由于 TS 又必须为函数返回值定义类型. 但是这并不影响将 getters 定义为箭头或者, 也不影响不使用 this 的 getters

     • getters: {
         doubleAge: (state) => {
           return state.user.age * 2;
         },
       
         doubleAgePlus3(): number {
           return this.doubleAge + 3;
         }
       }
       

2. 在页面或者组件使用 getters

   • 直接通过 store 实例对象

     • import { userStore } from '../store/user';
       const user = userStore();
       

     • <h2>{{ user.color }} | 【{{ user.doubleAge }}】</h2>
       

     • 

3. 向 getters 传递参数

   • getters 可以通过返回一个函数 A 来接收参数, 这个 A 的返回值也就是 getter 的值.

     • getters: {
         plusAgeBy: (state) => {
           return (moreAge: number) => state.user.age + moreAge
         }
       }
       

     • <h2>{{ user.color }} | 【{{ user.doubleAge }}】 | 【{{ user.plusAgeBy(10) }}】</h2>
       

     • 

   • 📕如果传递参数, getters 就不会再缓存了❗❗❗.

4. 使用其他 store 中的 getters

   • 直接在 getter 内部使用即可

   • import { useCounterStore } from './index'
     
     getters: {
       addCounterFromOtherStore: (state) => {
         const useCounter = useCounterStore();
         return state.user.age + useCounter.count;
       }
     }
     

   • <h2>{{ user.addCounterFromOtherStore }}</h2>
     

   •