【Vuex】mapGetters 辅助函数
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
最新文章
- java多线程操作
- 使用SQL Server 2008 维护计划(图解)
- ajax函数封装
- android 在使用studio 编写百度地图中遇到APP Scode码校验失败 问题
- 一些有用的HTML5 pattern属性
- IOS笔记 #pragma mark的用法和作用(方便查找和导航代码)
- SCOI2007修车
- List的add方法与addAll方法的区别
- springboot 配置多数据源
- Jquery回车键切换焦点方法(兼容各大浏览器)
- 发布Qt Quick桌面应用程序的方法
- C# 隐藏 Windows Phone 侦错模式中萤幕右上角的数据条(模拟器、实机可用),截图好方便。
- ICMP TYPE-CODE查阅表
- python学习之 getattr vs __get__ vs __getattr __ vs __getattribute__ vs __getitem__
- Docker 学习3 Docker镜像管理基础
- 一、Java JUC简介
- 注入攻击(SQL注入)
- 学习笔记——在vue中如何配置Jest(一)
- 小程序-formdata传参
- Mysql简单入门