Vue3实战笔记（16）—pinia基本用法--Getter

文章目录

前言
一、pinia的getter简单理解
二、访问其他 store 的 getter
总结

前言

在 Pinia 中，getter 类似于 Vuex 中的 getter，允许你从 store 中派生出一些状态，而不需要修改原始状态。这使得我们可以创建基于现有状态的计算属性。

一、pinia的getter简单理解

Getter 完全等同于 store 的 state 的计算值。可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数，并且它将接收 state 作为第一个参数。

export const useStore = defineStore('main', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},
})

大多数时候，getter 仅依赖 state，不过，有时它们也可能会使用其他 getter。因此，即使在使用常规函数定义 getter 时，我们也可以通过 this 访问到整个 store 实例，但(在 TypeScript 中)必须定义返回类型。这是为了避免 TypeScript 的已知缺陷，不过这不影响用箭头函数定义的 getter，也不会影响不使用 this 的 getter。


export const useStore = defineStore('main', {state: () => ({count: 0,}),getters: {// 自动推断出返回类型是一个 numberdoubleCount(state) {return state.count * 2},// 返回类型**必须**明确设置doublePlusOne(): number {// 整个 store 的 自动补全和类型标注 ✨return this.doubleCount + 1},},
})

然后你可以直接访问 store 实例上的 getter 了：


<script setup>
import { useCounterStore } from './counterStore'
const store = useCounterStore()
</script>
<template><p>Double count is {{ store.doubleCount }}</p>
</template>

与计算属性一样，你也可以组合多个 getter。通过 this，你可以访问到其他任何 getter。即使你没有使用 TypeScript，你也可以用 JSDoc 来让你的 IDE 提示类型。

export const useStore = defineStore('main', {state: () => ({count: 0,}),getters: {// 类型是自动推断出来的，因为我们没有使用 `this`doubleCount: (state) => state.count * 2,// 这里我们需要自己添加类型(在 JS 中使用 JSDoc)// 可以用 this 来引用 getter/*** 返回 count 的值乘以 2 加 1** @returns {number}*/doubleCountPlusOne() {// 自动补全 ✨return this.doubleCount + 1},},
})

二、访问其他 store 的 getter

想要使用另一个 store 的 getter 的话，那就直接在 getter 内使用就好：

import { useOtherStore } from './other-store'export const useStore = defineStore('main', {state: () => ({// ...}),getters: {otherGetter(state) {const otherStore = useOtherStore()return state.localData + otherStore.data},},
})

使用 setup() 时的用法
作为 store 的一个属性，你可以直接访问任何 getter(与 state 属性完全一样)：

<script setup>
const store = useCounterStore()
store.count = 3
store.doubleCount // 6
</script>

虽然并不是每个开发者都会使用组合式 API，但 setup() 钩子依旧可以使 Pinia 在选项式 API 中更易用。并且不需要额外的映射辅助函数！


<script>
import { useCounterStore } from '../stores/counter'export default defineComponent({setup() {const counterStore = useCounterStore()return { counterStore }},computed: {quadrupleCounter() {return this.counterStore.doubleCount * 2},},
})
</script>

这在将组件从选项式 API 迁移到组合式 API 时很有用，但应该只是一个迁移步骤，始终尽量不要在同一组件中混合两种 API 样式。

不使用 setup()
你可以使用前一节的 state 中的 mapState() 函数来将其映射为 getters：


import { mapState } from 'pinia'
import { useCounterStore } from '../stores/counter'export default {computed: {// 允许在组件中访问 this.doubleCount// 与从 store.doubleCount 中读取的相同...mapState(useCounterStore, ['doubleCount']),// 与上述相同，但将其注册为 this.myOwnName...mapState(useCounterStore, {myOwnName: 'doubleCount',// 你也可以写一个函数来获得对 store 的访问权double: store => store.doubleCount,}),},
}