mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中。它的功能和 mapState 非常类似,我们来直接看它的实现:

export function mapGetters (getters) {
const res = {}
normalizeMap(getters).forEach(({ key, val }) => {
res[key] = function mappedGetter () {
if (!(val in this.$store.getters)) {
console.error(`[vuex] unknown getter: ${val}`)
}
return this.$store.getters[val]
}
})
return res
}

  mapGetters 的实现也和 mapState 很类似,不同的是它的 val 不能是函数,只能是一个字符串,而且会检查 val in this.$store.getters 的值,如果为 false 会输出一条错误日志。为了更直观地理解,我们来看一个简单的例子:

import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象扩展操作符把 getter 混入到 computed 中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}

  经过 mapGetters 函数调用后的结果,如下所示:

import { mapGetters } from 'vuex'
export default {
// ...
computed: {
doneTodosCount() {
return this.$store.getters['doneTodosCount']
},
anotherGetter() {
return this.$store.getters['anotherGetter']
}
}
}

  再看一个参数 mapGetters 参数是对象的例子:

computed: mapGetters({
// 映射 this.doneCount 到 store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})

  经过 mapGetters 函数调用后的结果,如下所示:

computed: {
doneCount() {
return this.$store.getters['doneTodosCount']
}
}

.

vuex 中关于 mapGetters 的作用的更多相关文章

  1. vuex 中关于 mapActions 的作用

    mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中.和 mapState.mapGetters 也类似,只不过它映射的地方不是计算属性,而是组 ...

  2. vuex 中关于 mapState 的作用

    辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...

  3. vuex 中关于 mapMutations 的作用

    mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中.和 mapActions 的功能几乎一样,我们来直接看它的实现: export funct ...

  4. mapGetters 的作用__为什么mapGetter前面有...(三个点是去掉{}的作用)

    参考:vuex 中关于 mapGetters 的作用 mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中.它的功能和 mapState 非常类似,我们来直接看它的 ...

  5. vuex中mapGetters的使用及简单实现原理

    一.项目中的mapGetters在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会 ...

  6. 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象

    vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...

  7. vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations

    1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...

  8. vuex之 mapState, mapGetters, mapActions, mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.cnblogs.com/adouwt/p/8283 ...

  9. vuex里mapState,mapGetters使用详解

    这次给大家带来vuex里mapState,mapGetters使用详解,vuex里mapState,mapGetters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 一.介绍 vuex里面的 ...

随机推荐

  1. JVM(8):JVM知识点总览-高级Java工程师面试必备

    http://www.importnew.com/23792.html jvm 总体梳理 jvm体系总体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 当然这些知识点 ...

  2. nodeJS学习(2)--- NPM 使用介绍

    前言:express 推出了4.X,自己尝试了一下,出现了各种问题.结果查看了各种文档和问题,现在在这个给大家分享下4.X版本的安装. NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具, ...

  3. Flex布局--必然的选择

    这篇文章是我在阮一峰老师的flex布局教程下,按照自己的理解重写写一遍,以便增强理解.如果你来到这里最好去看一下阮一峰大神的Flex布局教程 正式开始自己的. 说起布局方式,大家首先要了解css3有哪 ...

  4. .NET结束外部进程 C#结束外部进程

    原文发布时间为:2011-02-15 -- 来源于本人的百度文章 [由搬家工具导入] using System;namespace ConsoleApplication2{    class Prog ...

  5. ashx接收参数 ashx传递参数

    原文发布时间为:2009-09-30 -- 来源于本人的百度文章 [由搬家工具导入] Handler.ashx文件: <%@ WebHandler Language="C#" ...

  6. AI创投的冰与火之歌:泡沫、跟风、短板和有钱花不出去的沮丧【转】

    转自:http://36kr.com/p/5071386.html 国内的AI行业仍处于野蛮生长阶段.热钱不少,优质项目却不多.创业者拿钱难,投资者有钱却花不出去. 编者按:本文来自微信公众号“刺猬公 ...

  7. interview ms1 N_Dorm

    判断是否为n回文,比如 a b a 是1 回文, abcdab是2回文. 输入: abcabc|3 这种格式,输出true or false #include <iostream> #in ...

  8. 组队训练3回放 ——hnqw1214

    组队训练3回放 练习赛过程回放: 开场先看最后一题, 发现是专题训练时做过的网络流原题, cst照着之前的打一遍,第一遍WA, 发现数组开小了,改大后AC. 这时候qw看B题, 一开始想不到方法, c ...

  9. Linux 安装 Java 运行环境

    方式一 # 简单粗暴流# 我使用的是 ubuntu server 18.04 LTS 版本的系统 不同的系统的命令可能存在差异# 在命令行使用java 回车 发现没有Java的话 下面会提示 安装的方 ...

  10. python中mp3转wav(Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but may not work")

    1.下载pydub:pip install pydub 2.下载与操作系统一致的ffmpeg:http://ffmpeg.org/download.html 3.解压后将下载的ffmpeg下的bin目 ...