Pinia（四）了解和使用getters

最新推荐文章于 2025-04-25 10:36:03 发布

庇耳拉海莱

最新推荐文章于 2025-04-25 10:36:03 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： pinia 文章标签： javascript 开发语言 ecmascript vue.js pinia

本文链接：https://blog.youkuaiyun.com/broken_promise/article/details/126497347

pinia 专栏收录该内容

5 篇文章

订阅专栏

`Getters`

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;
  }
}
```

在页面或者组件使用 getters

直接通过 store 实例对象

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

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

向 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 就不会再缓存了❗❗❗.

使用其他 store 中的 getters

直接在 getter 内部使用即可

import { useCounterStore } from './index'

getters: {
  addCounterFromOtherStore: (state) => {
    const useCounter = useCounterStore();
    return state.user.age + useCounter.count;
  }
}

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