【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);//3

 

使用...展開運算符就可以把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 //1
arg2 //2
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