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>
![alt](https://ucc.alicdn.com/w7spmoexbxbew_20231110_64c0cbcc6126475e81832dc2b113be0e.png?x-oss-process=image/resize,w_1400/format,webp)
❝
当然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
},
}
})
![alt](https://ucc.alicdn.com/w7spmoexbxbew_20231110_6ee2f310219e4b8f829a9dd4c049bdc9.png?x-oss-process=image/resize,w_1400/format,webp)
一、访问其他 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
},
}
})
![alt](https://ucc.alicdn.com/w7spmoexbxbew_20231110_d181a50ef50e4f338293486942e94feb.png?x-oss-process=image/resize,w_1400/format,webp)
总结:Pinia的getters,就是vuex computed的替身。pinia好的地方就是完整的 TypeScript 支持,所以访问this 记得添加返回类型即可。