mapGetters 的作用__为什么mapGetter前面有...(三个点是去掉{}的作用)
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.common.js中定义了mapGetter
mapGetters 的作用__为什么mapGetter前面有...(三个点是去掉{}的作用)的更多相关文章
- addListener添加事件监听器,第三个参数useCapture (Boolean) 的作用
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- 脚手架vue-cli系列三:vue-cli工程webpack的作用和特点
Vue项目开发过程中,会因为很多不同的实际运用需求不断地对webpack配置进行修改,在此之前,我们需要对webpack有一个基本的认识,了解它到底能为我们做些什么 webpack是一个模块打包的工具 ...
- OpenJDK源码研究笔记(三)-RandomAccess等标记接口的作用
标识接口是没有任何方法和属性的接口. 它仅仅表明它的类属于一个特定的类型,供其他代码来测试允许做一些事情. 下面来看一个标记接口RandomAccess. public interface Rando ...
- yii2-cache组件第三个参数Dependency $dependency的作用浅析
用法如下: $cache->set($key, $result, Configs::instance()->cacheDuration, new TagDependency([ 'tags ...
- [Android Pro] 横竖屏切换时,禁止activity重新创建,android:configChanges="keyboardHidden|orientation" 不起作用
referece to : http://blog.csdn.net/mybook1122/article/details/24978025 这个网上搜索,很多结果都是: AndroidManifes ...
- spring环境的搭建及作用和定义<一>
问题?spring的定义及作用.spring的环境搭建 一.spring的定义及作用 1.spring由Rod Johnson创建的一个开源框架,它是为了解决企业应用开发的复杂性而创建的.框架的主要优 ...
- php和apache的关系和作用()
出处:http://blog.csdn.net/hongweideng/article/details/41723465 php和apache的关系和作用是很多学习php的朋友非常关注的问题 首先在一 ...
- 交叉编译中的 --sysroot 等等在编译时的作用
--sysroot=dir 的作用 如果在编译时指定了-sysroot=dir 就是为编译时指定了逻辑目录.编译过程中需要引用的库,头文件,如果要到/usr/include目录下去找的情况下,则会在前 ...
- XML在JAVA项目中的作用
java项目中,xml文件一般都是用来存储一些配置信息 一般的编程, 多数用来存储配置信息 . 拿JDBC来说,可以把数据库连接字符串写到xml,如果要修改数据源,只需要改xml就可以了,没必要再去重 ...
随机推荐
- C# —— 点击按钮动态打开ComboBox
网上搜索了好多资料,大多是重绘ComboBox或者使用自定义控件创建一个全新的ComboBox(并非基于window的ComboBox). 对于菜鸟的我,实现太麻烦,有些代码理解起来困难,但是项目比较 ...
- 聚类算法K-Means算法和Mean Shift算法介绍及实现
Question:什么是聚类算法 1.聚类算法是一种非监督学习算法 2.聚类是在没有给定划分类别的情况下,根据数据相似度进行样本分组的一种方法 3.理论上,相同的组的数据之间有相同的属性或者是特征,不 ...
- redis淘汰+过期双向保证高可用 | redis 为什么那么快?
前言 redis和数据相比除了他们的结构型颠覆以外!还有他们存储位置也是不相同.传统数据库将数据存储在硬盘上每次数据操作都需要IO而Redis是将数据存储在内存上的.这里稍微解释下IO是啥意思.IO就 ...
- 使用pdb进行Python调试
调试应用有时是一个不受欢迎的工作,当你长期编码之后,只希望写的代码顺利运行.但是,很多情况下,我们需要学习一个新的语言功能或者实验检测新的方法,从而去理解其中运行的机制原理. 即使不考虑这样的场景,调 ...
- Redmine部署中遇到的问题
Redmine部署文章: 第一篇:Redmine部署 第二篇:Redmine部署中遇到的问题 上一篇文章我写了Redmine怎样部署(点这里直达上一篇文章),这一篇就写一下在Redmine部署中遇到过 ...
- 温故知新Docker概念及Docker Desktop For Windows v3.1.0安装
Docker 简介 什么是Docker? Docker是一个开放源代码软件项目,项目主要代码在2013年开源于GitHub.它是云服务技术上的一次创新,让应用程序布署在软件容器下的工作可以自动化进行, ...
- Linux云计算-03_必备基础命令
Linux系统启动默认为字符界面,一般不会启动图形界面,所以对命令行的熟练程度能更加方便.高效的管理Linux系统. 本章介绍Linux系统必备命令各项参数及功能场景,Linux常见命令包括:cd.l ...
- 在FLEX中真正的隐藏一个组件,隐藏后不占据自身的位置. (转)
一直被这个问题困扰,就是在设置UI的Visible的时候,改组件的位置一直被占着,比较恶心,今天在这里发现了一个方法, 操作方法如下设置: includeInLayout为false即可 来自:htt ...
- 关于vue告警 More than 1 blank line not allowed
开发vue-cli脚手架工程,eslint规范检查工具告警笔记 More than 1 blank line not allowed 代码空格不允许超过1行,把多余的空行删除就可以了
- 在Docker运行的Nignx内部署前后端分离项目
环境准备: Linux服务器: IP: 192.168.1.10 前端打包后的Vue项目: Port-3000, 请求地址192.168.1.10:8080 后端打包后的Java项目: Port-80 ...