参考: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. 『动善时』JMeter基础 — 47、JMeter的HTTP代理服务器详细介绍

    目录 1.HTTP代理服务器的添加 2.HTTP代理服务器界面详解 (1)State:状态 (2)Global Settings:全局设置 (3)Test Plan Creation:测试计划创建 ( ...

  2. 合宙模块AT相关资料汇总

    1. 目录 1. 目录 [2. 新手教程](#2. 新手教程) [3. 产品资料](#3. 产品资料) 3.1 [2G模块(GPRS / GPRS+GNSS)](#3.1 2G模块(GPRS / GP ...

  3. 记Aspose.Word的使用中出现的问题

    最近实现一个功能,具体需求就是把数据库中的内容转换成word文档,文档中需要包含标题.目录以及表格信息. 这里我使用的是Aspose.Word类,这是一个很强大的文档操作工具包,实现了所有操作文档的所 ...

  4. linux文件系统和日志分析

    一.Linux文件系统 1.inode与block 1.概述: (1)文件数据包括元信息与实际信息 (2)文件存储在硬盘上,硬盘最小存储单位是"扇区",每个扇区存储512字节 (3 ...

  5. JUnit5注解学习指引

    注解(Annotations)是JUnit的标志性技术,本文就来对它的20个注解,以及元注解和组合注解进行学习. 20个注解 在org.junit.jupiter.api包中定义了这些注解,它们分别是 ...

  6. Elasticsearch查询文档总数

    前言 在使用ES搜索的时候,或多或少都会面临查询数据总量的情况,下面介绍三种查询数据总量的方式. 其中,方案二解决了当结果数据总量超过1w时,由于ES默认设置(max_result_window:10 ...

  7. centos8 安装VNC配置远程连接

    系统信息 [root@centos8 ~]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) [root@centos8 ~] ...

  8. 使用 CKEditor编辑插件

    1, 安装方法 下载CKEditor插件,然后解压到对应的文件中.建议解压到JS文件夹下面的CKEditor这个文件夹下.下载地址 : http://down.chinaz.com/soft/2516 ...

  9. JS 获取JSON数据的属性

    var tballdata= [{ 'tjqd': '', 'A1': '', 'A2': '', 'A3': '', 'A4': '' };] if (typeof tballdata[0] == ...

  10. Vue 消除Token过期时刷新页面的重复提示

    1.问题现象   页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后 ...