mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

import { mapGetters } from 'vuex'

export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}

如果你想将一个 getter 属性另取一个名字,使用对象形式:

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

扩展:ES6展开运算符

定义:

.展开运算符允许一个表达式在某处展开。

使用场景

  1.展开函数在多个参数的地方使用 。意指用于函数传参

  2.多个元素的地方使用,意指用于数组字面量

  3.多个边框的地方使用,意指用于解构赋值

注意事项

  展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。

  iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。

函数调用中使用展开运算符

之前实现方式

function test(a, b, c) {
return a + b +c;
}
var args = [0, 1, 2];
test.apply(null, args);//3

如上,我们把args数组当作实参传递给了a,b,c,这边正是利用了Function.prototype.apply的特性。

ES6实现方式

function test(a, b, c) {
return a + b + c;
}
var args = [0, 1, 2];
test(...args);//

使用...展开运算符就可以把args直接传递给test()函数。

数组字面量中使用展开运算符

例如:两个数组合并为一个数组

var arr1=['a','b','c'];
var arr2=[...arr1,'d','e']; //['a','b','c','d','e']

用在push函数中,可以不用apply()函数合并2个数组

var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']

用于解构赋值

解构赋值也是ES6中的一个特性,而这个展开运算符可以用于部分情景:

展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,将多个数组项组合成了一个新数组。

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //
arg2 //
arg3 //['3','4']

ps:

  let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //报错

  即:解构赋值中展开运算符只能用在最后:

类数组对象变成数组

展开运算符可以将一个类数组对象变成一个真正的数组对象:

var obj = document.getElementById("box").getElementsByTagName("li");
Array.isArray(obj);//false
var arr=[...obj]; 

Array.isArray(arr); //true

相关资料:https://vuex.vuejs.org/zh-cn/getters.html

     https://www.cnblogs.com/mingjiezhang/p/5903026.html

     http://es6.ruanyifeng.com/#docs/destructuring

作者:smile.轉角

QQ:493177502

【Vuex】mapGetters 辅助函数的更多相关文章

  1. 扩展运算符及其在vuex的辅助函数里的应用详解

         一.扩展运算符   <1>为什么扩展运算符会诞生?              因为箭头函数没有arguments,所以才有了扩展运算符       <2>在箭头函数里 ...

  2. vuex 源码:深入 vuex 之辅助函数 mapState

    前言 当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了.我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性. 所以我们得清楚,mapState 的作用就是帮 ...

  3. vuex中辅助函数的使用方法

    mapState import { mapState } from 'vuex' export default { // ... computed:{ ...mapState({ // 箭头函数可使代 ...

  4. 理解Vuex的辅助函数mapState, mapActions, mapMutations用法

    在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...

  5. Vuex mapGetters,mapActions

    一.基本用法 1. 初始化并创建一个项目 ? 1 2 3 vue init webpack-simple vuex-demo cd vuex-demo npm install 2. 安装 vuex ? ...

  6. vuex mapGetters

    1.vuex 配置 //vuex的配置 //注意Store是大写 const store = new Vuex.Store({ //数据保存 state: { show: false, count: ...

  7. [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法

    原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...

  8. 解决 vuex mapGetters 语法报错 (Unexpected token )

    在使用vuex2的mapGetters 和 mapActions 的方法时,借助 stage2 的 Object Rest Operator 特性,可以写出下面代码:  computed: { ... ...

  9. Vuex之辅助函数

    mapState.mapGetters.mapActions 如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funNa ...

随机推荐

  1. 异常:Data = 由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值。

    做项目的时候,将DataTable序列化成Json,通过ashx向前台返回数据的时候,前台总是获取不到数据,但是程序运行却没问题, 没抛出异常.一时找不到办法,减小输出的数据量,这时前台可以接收到页面 ...

  2. idea输入法不跟随解决办法

    最近使用idea开发项目,遇到输入法不跟随的问题,自己动手解决了下 idea输入法不跟随解决办法: 1):系统:windows10 版本:idea2017.2 解决办法:使用QQ输入法 2):系统:w ...

  3. 常见js面试题

    包含内容: Array indexOf(). 数组扁平化 isArray() 数组的去重 Object.is() Array.filter 用一行代码实现数组扁平化? JavaScript isArr ...

  4. js 常用正则表达式

    1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...

  5. 51nod"省选"模测 A 树的双直径(树形dp)

    题意 题目链接 Sol 比赛结束后才调出来..不多说啥了,就是因为自己菜. 裸的up-down dp,维护一下一个点上下的直径就行,一开始还想了个假的思路写了半天.. 转移都在代码注释里 毒瘤题目卡空 ...

  6. View的getMeasuredWidth和getWidth有什么区别?

    getMeasuredWidth 为view的测量宽度. getWidth为view的最终宽度. (这里只讨论宽度,高度也是一样的道理) 那么它们之间有什么区别呢? 测量宽度是在view的measur ...

  7. redis cluster是如何做到集两家之长的

    站在读写分离的层次看redis的时候,redis和master和slave存在明显的主从关系,也就是说master处于管理状态,salve跟着大哥混,master给小弟slave发粮食[发送内存快照数 ...

  8. Ne10编译安装

    介绍 NEON,即"ARM Advanced SIMD",是ARM从ARMv7开始提供的高级单指令多数据(SIMD)扩展.它是一种64/128位混合SIMD体系结构.NEON在网上 ...

  9. 使用 Python

    使用 Python Python 官网及镜像 官网:https://www.python.org/ 镜像:http://npm.taobao.org/mirrors/python/ 安装玩Python ...

  10. leetcode-53.最大子序和

    leetcode-53.最大子序和 题意 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,- ...