mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } |
如果你想将一个 getter 属性另取一个名字，使用对象形式：
|
1 2 3 4 |
mapGetters({ // 映射 `this.doneCount` 为 `store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) |
扩展：ES6展开运算符
定义：
.展开运算符允许一个表达式在某处展开。
使用场景
1.展开函数在多个参数的地方使用 。意指用于函数传参
2.多个元素的地方使用，意指用于数组字面量
3.多个边框的地方使用，意指用于解构赋值
注意事项
展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。
iterables的实现是依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator]方法，而Object尚未内置该方法，因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。
之前实现方式
|
1 2 3 4 5 |
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实现方式
|
1 2 3 4 5 |
function test(a, b, c) { return a + b + c; } var args = [0, 1, 2]; test(...args);//3 |
使用…展开运算符就可以把args直接传递给test()函数。
例如：两个数组合并为一个数组
|
1 2 |
var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e'] |
用在push函数中，可以不用apply()函数合并2个数组
|
1 2 3 |
var arr1=['a','b','c']; var arr2=['d','e']; arr1.push(...arr2); //['a','b','c','d','e'] |
解构赋值也是ES6中的一个特性，而这个展开运算符可以用于部分情景：
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的，将多个数组项组合成了一个新数组。
|
1 2 3 4 |
let [arg1,arg2,...arg3] = [1, 2, 3, 4]; arg1 //1 arg2 //2 arg3 //['3','4'] |
ps：
let [arg1,…arg2,arg3] = [1, 2, 3, 4]; //报错
即：解构赋值中展开运算符只能用在最后：
展开运算符可以将一个类数组对象变成一个真正的数组对象：
|
1 |
var obj = document.getElementById("box").getElementsByTagName("li"); |
|
1 |
<strong>Array.isArray(obj</strong><strong>);//false</strong> |
|
1 2 3 |
var arr=[...obj]; <strong>Array.isArray(</strong>arr<strong>); //true</strong> |
相关资料：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
from:https://www.cnblogs.com/websmile/p/8328138.html