問(wèn)題描述

vuex中的代碼

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

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

問(wèn)題解答

自己寫(xiě)幾個(gè)例子不就知道了…………比如：

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

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

... 把對(duì)象在此地展開(kāi)為鍵值對(duì)。如果直接寫(xiě)，有語(yǔ)法錯(cuò)誤或者邏輯錯(cuò)誤。

借用 @xiaoboost 的例子：

有 ... 運(yùn)算符，點(diǎn)擊查看

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}

沒(méi)有 ... 運(yùn)算符，點(diǎn)擊查看

結(jié)果是：

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

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