javascript - 請問下面程式碼中的...是擴充運算子還是操作運算子？這樣寫是什麼意思？

Question

vuex中的程式碼

computed:{
    ...mapState(["count"]),
    count(){
        return this.$store.getters.count;
    }
},

請問mapState前面的...是什麼意思？加這個和不加這個有什麼差別？已經看過擴充運算子和操作運算子的相關文檔，不過還是不太明白，求詳細點的解釋。 。

Answer 1

自己寫幾個例子不就知道了…………比如：

const state = {
    a: 1,
    b: 2,
    c: 3
};
const now = {
    ...state,
    d: 4,
    e: 5
};

console.log(now);

這個語法大部分瀏覽器還不支持，所以你可以先去babel轉一下，把轉碼後的程式碼直接放到控制台運行，看看出來的是啥。這個運算符其實挺簡單的…

Answer 2

... 把物件在此地展開為鍵值對。如果直接寫，有語法錯誤或邏輯錯誤。

借用 @xiaoboost 的例子：

有 ... 運算符，點擊查看

const state = {
    a: 1,
    b: 2,
    c: 3
};
const now = {
    ...state,
    d: 4,
    e: 5
};

console.log(now);

結果是

Object {
  "a": 1,
  "b": 2,
  "c": 3,
  "d": 4,
  "e": 5
}

沒有 ... 運算符，點擊查看

結果是：

Object {
  "d": 4,
  "e": 5,
  "state": Object {
    "a": 1,
    "b": 2,
    "c": 3
  }
}

Answer 3

...mapState(["count"])
加...是為了將mapState物件分割，傳回分離的各項，就可與局部計算屬性(computed)混合使用了
不加... mapState可是一個物件computed也是一個物件那就得一個一個的屬性賦值吧
或是你computed物件裡不打算有其他屬性，你直接computed:mapState(["count"])應該也可以