Pinia——Getters

文章目录

什么是 Getter
访问其他 getter
将参数传递给 getter
访问其他 Store 的 getter

什么是 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:{// 自动将返回类型推断为 NumberdoubleCount(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 访问任何其他 getterreturn 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},},
})

Pinia——Getters相关推荐

Pinia 上手使用（store、state、getters、actions）
参考链接:https://juejin.cn/post/7121209657678364685 Pinia官方:https://pinia.vuejs.org/zh/introduction.html ...
Vue使用Pinia实现状态管理
Pinia初始化创建VUE3项目 npm init vite @latest 安装Pinia npm install pinia 将Pinia挂载到vue实例 main.ts import {cre ...
四、Pinia 的安装及其基本使用
前言 Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态. Pinia API 与 Vuex ≤4 有很大不同,即: mutations 不再存在.他们经常被认为是非常冗长.他们最初带 ...
vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结
创建项目: vite脚手架创建项目: vue3+vite2+ts npm create vite@latest 一.页面组件结构 <template>home </template& ...
Vue之Hello World！
目录 1.简介 1.1.Vue介绍 1.2.什么是MVVM模型 1.3.Vue相关 1.4.帮助文档 1.5.VUE GitHub 2.安装 2.1.管理员启动cmd,执行npm install vu ...
vue3 + ts ＜script setup＞语法糖
这里是引用 1.data 2.computed 3.父传子 4.子传父 5.原型链绑定和组件使用 6.父子组件 v-model 7.nextTick 8.插槽 9.路由useRoute和useRout ...
Pinia轻量级状态管理
1.1核心概念 vuex中有四个核心概念: State Getters Mutaions Actions 在Pinia中: State Getters Actions 同步异步都支持 1.2基本示例 ...
全新的 Vue3 状态管理工具：Pinia
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
快速入门 Pinia 状态管理库
Pinia 是一个用于 Vue 的状态治理库,相似 Vuex, 是 Vue 的另一种状态治理计划.如果你现在使用 vue3 开发项目,那么推荐你使用 Pinia 开发. Pinia的优点 1.完整的 ...