vuex的輔助函數mapState前面的那三個點--對象展開運算符

  1. 關于mapState,官方文檔的說法:

    當一個組件需要獲取多個狀態時候,將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題,我們可以使用 mapState 輔助函數幫助我們生成計算屬性,讓你少按幾次鍵: 
    mapState 函數返回的是一個對象。我們如何將它與局部計算屬性混合使用呢?通常,我們需要使用一個工具函數將多個對象合并為一個,以使我們可以將最終對象傳給 computed 屬性。

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

     
  2. computed: {
  3. localComputed () { /* ... */ },
  4. // 使用對象展開運算符將此對象混入到外部對象中
  5. ...mapState({
  6. // ...
  7. })
  8. }
  9. 1
  10. 2
  11. 3
  12. 4
  13. 5
  14. 6
  15. 7
  16. 等等,他是怎么混入到外部對象的呢? 
    自己實驗了一把: 
    既然mapState是一個函數并且返回的是一個對象,那么就類似于

    function fn(){return {a:1,b:c}}
  17. 1
  18. 如果我直接寫:

     
  19. var test = {
  20. fn();
  21. }
  22. 1
  23. 2
  24. 3
  25. 必然是會報錯的呀,這個時候就可以用到三個點…對象展開運算符(現處于 ECMASCript 提案 stage-3 階段); 
    將fn()的返回值進行展開運算,但是…fn(),必須在一個外部對象里面執行 
    如果

     
  26. var test = {
  27. ...fn()
  28. }
  29. 1
  30. 2
  31. 3
  32. 得到的結果就是:

    test= {a: 1, b: 2}
  33. 1
  34. 就是把一個對象的key和value展開混入到另一個對象里面,由此想到對象的 深拷貝 
    如何將一個對象進行深拷貝的問題,又多出了一個答案:

     
  35. var a ={
  36. id:1,
  37. user:'admin'
  38. }
  39. //如何深拷貝a到b里面?
  40. var b = {
  41. ...a,
  42. info:'拷貝a的內容到b的對象里面',
  43. name:'快到碗里來'
  44. }
  45. 1
  46. 2
  47. 3
  48. 4
  49. 5
  50. 6
  51. 7
  52. 8
  53. 9
  54. 10
  55. 11
  56. 關于三個點,學習之路還在繼續…

上海二八杠单人操作