参考: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.common.js中定义了mapGetter

mapGetters 的作用__为什么mapGetter前面有...(三个点是去掉{}的作用)的更多相关文章

  1. addListener添加事件监听器,第三个参数useCapture (Boolean) 的作用

    addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...

  2. 脚手架vue-cli系列三:vue-cli工程webpack的作用和特点

    Vue项目开发过程中,会因为很多不同的实际运用需求不断地对webpack配置进行修改,在此之前,我们需要对webpack有一个基本的认识,了解它到底能为我们做些什么 webpack是一个模块打包的工具 ...

  3. OpenJDK源码研究笔记(三)-RandomAccess等标记接口的作用

    标识接口是没有任何方法和属性的接口. 它仅仅表明它的类属于一个特定的类型,供其他代码来测试允许做一些事情. 下面来看一个标记接口RandomAccess. public interface Rando ...

  4. yii2-cache组件第三个参数Dependency $dependency的作用浅析

    用法如下: $cache->set($key, $result, Configs::instance()->cacheDuration, new TagDependency([ 'tags ...

  5. [Android Pro] 横竖屏切换时,禁止activity重新创建,android:configChanges="keyboardHidden|orientation" 不起作用

    referece to : http://blog.csdn.net/mybook1122/article/details/24978025 这个网上搜索,很多结果都是: AndroidManifes ...

  6. spring环境的搭建及作用和定义<一>

    问题?spring的定义及作用.spring的环境搭建 一.spring的定义及作用 1.spring由Rod Johnson创建的一个开源框架,它是为了解决企业应用开发的复杂性而创建的.框架的主要优 ...

  7. php和apache的关系和作用()

    出处:http://blog.csdn.net/hongweideng/article/details/41723465 php和apache的关系和作用是很多学习php的朋友非常关注的问题 首先在一 ...

  8. 交叉编译中的 --sysroot 等等在编译时的作用

    --sysroot=dir 的作用 如果在编译时指定了-sysroot=dir 就是为编译时指定了逻辑目录.编译过程中需要引用的库,头文件,如果要到/usr/include目录下去找的情况下,则会在前 ...

  9. XML在JAVA项目中的作用

    java项目中,xml文件一般都是用来存储一些配置信息 一般的编程, 多数用来存储配置信息 . 拿JDBC来说,可以把数据库连接字符串写到xml,如果要修改数据源,只需要改xml就可以了,没必要再去重 ...

随机推荐

  1. .NET Core/.NET5/.NET6 开源项目汇总1:常用必备组件

    系列目录     [已更新最新开发文章,点击查看详细] 开源项目是众多组织与个人分享的组件或项目,作者付出的心血我们是无法体会的,所以首先大家要心存感激.尊重.请严格遵守每个项目的开源协议后再使用.尊 ...

  2. Java 到底是值传递还是引用传递?

    关于这个问题,引发过很多广泛的讨论,看来很多程序员对于这个问题的理解都不尽相同,甚至很多人理解的是错误的.还有的人可能知道Java中的参数传递是值传递,但是说不出来为什么. 在开始深入讲解之前,有必要 ...

  3. top命令信息详解

    top详解 [root@localhost ~]# top top - 09:36:38 up 17:59, 3 users, load average: 0.00, 0.03, 0.00 Tasks ...

  4. redis不完整的事务实现Transaction

    使用场景 redis一个命令执行是单线程的,不用担心并发冲突,如果你想有几个命令想像一个命令一样,在这几个命令执行过程中不会执行别的客户端发来的命令 ,也就是原子性,就可以用 redis Transa ...

  5. [Abp vNext 源码分析] - 20. 电子邮件与短信支持

    一.简介 ABP vNext 使用 Volo.Abp.Sms 包和 Volo.Abp.Emailing 包将短信和电子邮件作为基础设施进行了抽象,开发人员仅需要在使用的时候注入 ISmsSender ...

  6. linux下 大日志文件查看与搜索---less

    场景 有一个几十m的大日志文件,里边的记录是按时间排序的. 现在需要找到其中,不知道在什么位置的一条错误消息.这时候,想把内容拷出来都费劲,就算拷出来了,一般的编辑器也难以hold住这么大的文件.这时 ...

  7. vue中$nextTick详细讲解保证你一看就明白

    1.功能描述 今天我们要实现这个一个小功能: 页面渲染完成后展示一个div元素: 当点击这个div元素后: div元素消失: 出现一个input元素:并且input元素聚焦 想必大家我觉得简单,我们一 ...

  8. 对ES6中类class以及实例对象、原型对象、原型链之间关系的详细总结

    1. 类 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后用这个类来实例化对象.即类的用途:实例化对象. // 创建一个Person类 class Person { } // ...

  9. FutureTask相关

    上周因为项目中的线程池参数设置的不合理,引发了一些问题,看了下代码,发现对JUC中的一些概念需要再清晰些. Runnable @FunctionalInterface public interface ...

  10. 正则表达式_爬取豆瓣电影排行Top250

    前言: 利用简单的正则表达式,获取响应内容爬取数据. Part1 正则表达式(Regular Expression) 1.1 简介 正则表达式,又称规则表达式,它是一种文本模式,就是通过事先定义好的一 ...