vuex的輔助函式mapState前面的那三個點--物件展開運算子
阿新 • • 發佈:2019-01-31
關於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:'快到碗裡來'
}
關於三個點,學習之路還在繼續…