1. 程式人生 > >vuex的輔助函式mapState前面的那三個點--物件展開運算子

vuex的輔助函式mapState前面的那三個點--物件展開運算子

關於mapState,官方文件的說法:

當一個元件需要獲取多個狀態時候,將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題,我們可以使用 mapState 輔助函式幫助我們生成計算屬性,讓你少按幾次鍵:
mapState 函式返回的是一個物件。我們如何將它與區域性計算屬性混合使用呢?通常,我們需要使用一個工具函式將多個物件合併為一個,以使我們可以將最終物件傳給 computed 屬性。

但是看到下面的程式碼沒有反應過來

computed: {
  localComputed () { /* ... */ },
  // 使用物件展開運算子將此物件混入到外部物件中
  ...mapState({
    // ...
}) }

等等,他是怎麼混入到外部物件的呢?
自己實驗了一把:
既然mapState是一個函式並且返回的是一個物件,那麼就類似於

function fn(){return {a:1,b:c}}

如果我直接寫:

var test = {
    fn();
}

必然是會報錯的呀,這個時候就可以用到三個點…物件展開運算子(現處於 ECMASCript 提案 stage-3 階段);
將fn()的返回值進行展開運算,但是…fn(),必須在一個外部物件裡面執行
如果

var test = {
    ...fn()
}

得到的結果就是:

test= {a: 1, b: 2}

就是把一個物件的key和value展開混入到另一個物件裡面,由此想到物件的 深拷貝
如何將一個物件進行深拷貝的問題,又多出了一個答案:

var a ={
    id:1,
    user:'admin'
}
//如何深拷貝a到b裡面?
var b = {
    ...a,
    info:'拷貝a的內容到b的物件裡面',
    name:'快到碗裡來'
}

關於三個點,學習之路還在繼續…