Vuex 白話教程第五講 Vuex 的小幫手

先說兩句

前面已經講完了 vuex 下的 state、getter、mutation 及 action 這四駕馬車，不知道大家是否已經理解。當然，要想真正熟練掌握的話，還是需要不斷的練習和動手實踐才行。

其實只要把這四駕馬車完全熟練駕馭了，那麼應對一些中小型的專案，基本上就已經沒啥問題了，後面的 module 這架終極馬車，其實是為了搞定那些稍微大型複雜一點的專案，避免 store 裡面的資料太多，難以管理而設計，這駕馬車稍微比較抽象，不太好駕馭，我們下一講再來詳細的去剖解它。

vue 裡面的很多配套設施，在使用體驗上一直都追求著簡潔，追求著極致，**不爽改**，所以這也是為什麼 vue 能夠長時間深得民心的乙個很重要的原因所在。那麼這一講，主要就和大家簡單的聊一聊 vuex 的一些常用的輔助函式。

mapstate

通過前面的學習，我們知道，從 store 例項中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態。

那麼，當乙個元件需要獲取多個狀態的時候，怎麼辦？是不是這樣：

export default ,
b () ,
c () ,
...}
}

當然，這樣是沒問題的，但是總感覺寫起來很難受，看起來更難受是吧！既然這麼容易我們就感受到了，vuex 能感受不到嗎，能忍得了嗎？

絕對不能忍，所以mapstate輔助函式被創造了出來，用來搞定這個人人為之咬牙切齒的痛點。

// 在單獨構建的版本中輔助函式為 vuex.mapstate
import  from 'vuex'
export default 
})}

通過上面的示例，可以了解到，我們可以直接把需要用到的狀態全部存放在mapstate裡面進行統一管理，而且還可以取別名，做額外的操作等等。

如果所對映的計算屬性名稱與 state 的子節點名稱相同時，我們還可以更加簡化，給mapstate傳乙個字串陣列：

computed: mapstate([
// 對映 this.a 為 store.state.a
'a',
'b',
'c'])

因為computed這個計算屬性接收的是乙個物件，所以由上面的示例**可以看出，mapstate函式返回的是乙個物件，現在如果想要和區域性的計算屬性混合使用的話，可以使用 es6 的語法這樣寫來大大簡化：

computed: ,
// 使用物件展開運算子將此物件混入到外部物件中
...mapstate()
}

了解了mapstate輔助函式後，接下來的幾個輔助函式的用法也基本上都差不多了，我們繼續往下看。

mapgetters

這個和mapstate基本上沒啥區別，簡單看下官方的例子，就懂了：

import  from 'vuex'
export default 
}

取個別名，那就用物件的形式，以下示例的意思就是把this.donecount對映為this.$store.getters.donetodoscount。

mapgetters()

mapmutations

直接看示例**：

import  from 'vuex'
export default )
}}

簡直不要太好用，**荷也可以直接支援。

mapactions

和mapmutations用法一模一樣，換個名字即可。

import  from 'vuex'
export default )
}}

想要在元件中呼叫，直接this.***就完了。

寫在最後

最後一講「vuex 白話教程第六講：vuex 的管理員 module（實戰篇）」