本文主要是介绍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,}),},
}
总结
Pinia 的 getter 提供了一种方便的方式来派生出新的状态,而不需要改变原始状态。它们易于定义和使用,并且提供了缓存以提高性能。通过使用 getter,你可以创建复杂的状态逻辑,同时保持代码的清晰和组织。
小提示:从vue2到vue3的转变,组合式写法的思维需要慢慢熟悉。
这篇关于Vue3实战笔记(16)—pinia基本用法--Getter的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!