前言：國(guó)慶歸來，我們繼續(xù)。
這章我們講mapMutations和mapGetters這兩個(gè)輔助函數(shù)，然后我們vuex基本的概念和使用方法到此就講完了。
GitHub：https://github.com/Ewall1106/mall

1、mapMutations

（1）還是來看看這張圖：

vuex狀態(tài)管理機(jī)制

（2）通過這張圖我們知道了vuex狀態(tài)管理機(jī)制的一個(gè)大體步驟，但是，前面我有一點(diǎn)沒提到，那就是在組件中，可以通過commit方法跳過1步驟直接提交mutations，如圖：

組件直接使用commit方法提交mutations

（3）而mapMutations這種輔助函數(shù)不過就是為了簡(jiǎn)化操作：

使用mapMutations輔助函數(shù)

2、Getter

（1）說mapGetters這個(gè)輔助函數(shù)之前，我們還需要將store倉(cāng)庫再拆分一個(gè)getters.js文件出來，那么，這個(gè)文件是干嘛的呢？

有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)。
Vuex 允許我們?cè)?store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

（2）具體到我們的代碼例子中，讓我們把簡(jiǎn)單的問題復(fù)雜化，我們不直接獲取state中的city值了，我們?cè)?code>getter.js中獲取return返回state中的city值。

`getter.js`中`return`返回`state`中的`city`值。

（3）然后我們還需要在index.js中注冊(cè)

注冊(cè)getters

（4）然后我們就可以訪問到return返回的值了

Getter 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪問這些值。

通過store.getters 對(duì)象

3、mapGetters

到這里快結(jié)尾了，你應(yīng)該立刻明白這個(gè)輔助函數(shù)不過就是簡(jiǎn)化而已，不過這里有幾點(diǎn)要注意一下，此輔助函數(shù)是個(gè)計(jì)算屬性，所以：

• mapMutations放到methods下；
• mapActions放到methods下；
• mapGetters放到computed下。

使用mapGetters輔助函數(shù)

4、小結(jié)

vuex的整個(gè)流程和一系列的輔助函數(shù)的使用到處就講完了，大家根據(jù)自己的業(yè)務(wù)需求相應(yīng)處理；然后就是官網(wǎng)還有更高級(jí)的用法，大家也可以自行琢磨。