問題描述

vuex中的代碼

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

請問mapState前面的...是什么意思？加這個和不加這個有什么區(qū)別？已經(jīng)看過擴展運算符和操作運算符的相關(guān)文檔，不過還是不太明白，求詳細點的解釋。。

問題解答

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

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

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

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

借用 @xiaoboost 的例子：

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

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

結(jié)果是

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

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

結(jié)果是：

Object { 'd': 4, 'e': 5, 'state': Object { 'a': 1, 'b': 2, 'c': 3 }}回答3：

...mapState(['count'])加...是為了將mapState對象分割，返回分離的各項，就可與局部計算屬性(computed)混合使用了不加... mapState可是一個對象 computed也是一個對象 那就得一個一個的屬性賦值吧或者你computed對象里不打算有其他屬性，你直接computed:mapState(['count'])應(yīng)該也可以