vuex 中关于 mapGetters 的作用
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 的作用的更多相关文章
- vuex 中关于 mapActions 的作用
mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中.和 mapState.mapGetters 也类似,只不过它映射的地方不是计算属性,而是组 ...
- vuex 中关于 mapState 的作用
辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...
- vuex 中关于 mapMutations 的作用
mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中.和 mapActions 的功能几乎一样,我们来直接看它的实现: export funct ...
- mapGetters 的作用__为什么mapGetter前面有...(三个点是去掉{}的作用)
参考:vuex 中关于 mapGetters 的作用 mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中.它的功能和 mapState 非常类似,我们来直接看它的 ...
- vuex中mapGetters的使用及简单实现原理
一.项目中的mapGetters在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会 ...
- 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象
vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...
- vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations
1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...
- vuex之 mapState, mapGetters, mapActions, mapMutations 的使用
一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.cnblogs.com/adouwt/p/8283 ...
- vuex里mapState,mapGetters使用详解
这次给大家带来vuex里mapState,mapGetters使用详解,vuex里mapState,mapGetters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 一.介绍 vuex里面的 ...
随机推荐
- JVM(8):JVM知识点总览-高级Java工程师面试必备
http://www.importnew.com/23792.html jvm 总体梳理 jvm体系总体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 当然这些知识点 ...
- nodeJS学习(2)--- NPM 使用介绍
前言:express 推出了4.X,自己尝试了一下,出现了各种问题.结果查看了各种文档和问题,现在在这个给大家分享下4.X版本的安装. NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具, ...
- Flex布局--必然的选择
这篇文章是我在阮一峰老师的flex布局教程下,按照自己的理解重写写一遍,以便增强理解.如果你来到这里最好去看一下阮一峰大神的Flex布局教程 正式开始自己的. 说起布局方式,大家首先要了解css3有哪 ...
- .NET结束外部进程 C#结束外部进程
原文发布时间为:2011-02-15 -- 来源于本人的百度文章 [由搬家工具导入] using System;namespace ConsoleApplication2{ class Prog ...
- ashx接收参数 ashx传递参数
原文发布时间为:2009-09-30 -- 来源于本人的百度文章 [由搬家工具导入] Handler.ashx文件: <%@ WebHandler Language="C#" ...
- AI创投的冰与火之歌:泡沫、跟风、短板和有钱花不出去的沮丧【转】
转自:http://36kr.com/p/5071386.html 国内的AI行业仍处于野蛮生长阶段.热钱不少,优质项目却不多.创业者拿钱难,投资者有钱却花不出去. 编者按:本文来自微信公众号“刺猬公 ...
- interview ms1 N_Dorm
判断是否为n回文,比如 a b a 是1 回文, abcdab是2回文. 输入: abcabc|3 这种格式,输出true or false #include <iostream> #in ...
- 组队训练3回放 ——hnqw1214
组队训练3回放 练习赛过程回放: 开场先看最后一题, 发现是专题训练时做过的网络流原题, cst照着之前的打一遍,第一遍WA, 发现数组开小了,改大后AC. 这时候qw看B题, 一开始想不到方法, c ...
- Linux 安装 Java 运行环境
方式一 # 简单粗暴流# 我使用的是 ubuntu server 18.04 LTS 版本的系统 不同的系统的命令可能存在差异# 在命令行使用java 回车 发现没有Java的话 下面会提示 安装的方 ...
- 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目 ...