Getter

1. 前言

本小节我们将介绍 Vuex 中 getter 的使用方式。包括如何定义 getter、使用 getter、辅助函数 mapGetters 的使用。Getter 在项目中的使用非常普通,学会使用 Getter 可以避免我们重复的通过 state 获取数据。同学们在学完本小节后可以多尝试写一些 Getter 来巩固本节的知识点。

2. 慕课解释

Vuex 允许我们在 store 中定义 “getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。— 官方定义

我们可以把 Getter 理解成是封装好的获取数据的方法,在方法内部我们可以对 state 中的数据做一些相应的处理,最后返回我们想要的数据。

3. 用法

3.1 通过属性访问

Getter 接受 state 作为其第一个参数,我们可以对 state 中的数据做相应的处理,最终返回我们想要的数据:

实例演示
预览 复制