Getter
❝
Getter 完全等同于 Store 状态的 计算值。
意味着，getter就和vuex里面的computed一样。它接收一个参数，参数就是state。
//src/store/index.ts
import { defineStore } from 'pinia'
export const useCounters = defineStore('counter',{
state: () => {
return{
count: 100,
people: 4,
}
},
getters:{
getAllCount: state => state.count state.people
}
})
//src/App.vue
<script>
import { useCounters } from '@/store'
export default {
setup() {
const useCounter = useCounters();
return {
useCounter,
}
},
}
</script>
<template>
<div>
今天种了多少颗苹果树：{
{ useCounter.getAllCount }}颗。
</div>
</template>
❝
当然getters除了参数可以去访问state，也可以使用this，去访问到 整个 store 的实例，但是需要定义返回类型（在 TypeScript 中）
import { defineStore } from 'pinia'
export const useCounters = defineStore('counter',{
state: () => {
return{
count: 100,
people: 4,
}
},
getters:{
getAllCount: state => state.count state.people,
// 返回类型必须明确设置
doubleCount(): number {
return (this.count this.people) 2
},
}
})
一、访问其他 getter
与计算属性一样，您可以组合多个getter。 通过this 访问任何其他 getter。即使您不使用 TypeScript，您也可以使用 JSDoc 提示您的 IDE 类型：
import { defineStore } from 'pinia'
export const useCounters = defineStore('counter',{
state: () => {
return{
count: 100,
people: 4,
}
},
getters:{
getAllCount: state => state.count state.people,
// 这里需要我们自己添加类型（在 JS 中使用 JSDoc）。 我们还可以
// 使用它来记录 getter
/**
返回计数器值乘以二。
@returns {number}
/
doubleCount(): number {
return this.getAllCount 2
},
}
})
二、将参数传递给 getter
Getters 只是幕后的 computed 属性，因此无法向它们传递任何参数。 但是，您可以从 getter 返回一个函数以接受任何参数：
import { defineStore } from 'pinia'
export const useUserStores = defineStore('counter',{
state: () => {
return{
users: [
{
id: 100001,
name: '大宝',
sex: 'male'
},
{
id: 100002,
name: '小宝',
sex: 'male'
}
]
}
},
getters:{
getUserById: (state) => {
return (userId) => state.users.find((user) => user.id === userId)
},
}
})
<script>
import { useUserStores } from '@/store'
export default {
setup() {
const useUserStore = useUserStores();
return {
useUserStore,
}
},
}
</script>
<template>
<div>
用户2的id是：{
{ useUserStore.getUserById(100002) }}。
</div>
</template>
请注意，在执行此操作时，getter 不再缓存，它们只是您调用的函数。 但是，您可以在 getter 本身内部缓存一些结果
二、访问其他 Store 的getter
要使用其他存储 getter，您可以直接在 better 内部使用它：
import { defineStore } from 'pinia'
import { useOtherStores } from './other-store'
export const useUserStores = defineStore('counter',{
state: () => {
return{
count: 100
}
},
getters:{
getAllCount: (state) => {
const otherData = useOtherStores();
return state.count * otherData.size
},
}
})
总结：Pinia的getters，就是vuex computed的替身。pinia好的地方就是完整的 TypeScript 支持，所以访问this 记得添加返回类型即可。
