什么是 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
},
},
})