首页 技术 正文
技术 2022年11月15日
0 收藏 898 点赞 4,397 浏览 1613 个字

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,082
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,556
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,406
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,179
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,815
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898