Pinia（四）了解和使用getters

曾经终败给现在 2024-05-24 03:02 6阅读 0赞

### `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>
         *  ![在这里插入图片描述][0abd5b0a39fc44bab0581f2d03caa7c7.png_pic_center]
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>
         *  ![在这里插入图片描述][6cd3213307a9463b908221ffd03b9803.png_pic_center]
     *  ?如果传递参数, `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>
     *  ![在这里插入图片描述][58d119d79a294fff8bf654738b62d6ae.png_pic_center]

[0abd5b0a39fc44bab0581f2d03caa7c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/53aa0596f71541fbb5ef3a3878f0cc77.png
[6cd3213307a9463b908221ffd03b9803.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/eaa3045016514e57917801adfb8c4949.png
[58d119d79a294fff8bf654738b62d6ae.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e8fe4ae467c746c3b381d9d0cbd1cf2b.png