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>
- 直接在