37、vuex初探（五）
前言：國慶歸來，我們繼續。
這章我們講 mapMutations 和 mapGetters 這兩個輔助函式，然後我們vuex基本的概念和使用方法到此就講完了。
GitHub： ofollow,noindex">https://github.com/Ewall1106/mall
1、mapMutations
（1）還是來看看這張圖：
vuex狀態管理機制
（2）通過這張圖我們知道了vuex狀態管理機制的一個大體步驟，但是，前面我有一點沒提到，那就是在元件中，可以通過 commit 方法跳過 1步驟 直接提交 mutations ，如圖：
元件直接使用commit方法提交mutations
（3）而 mapMutations 這種輔助函式不過就是為了簡化操作：
使用mapMutations輔助函式
2、Getter
（1）說 mapGetters 這個輔助函式之前，我們還需要將 store 倉庫再拆分一個 getters.js 檔案出來，那麼，這個檔案是幹嘛的呢？
有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數。
Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣， getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。
（2）具體到我們的程式碼例子中，讓我們把簡單的問題複雜化，我們不直接獲取 state 中的 city 值了，我們在 getter.js 中獲取 return 返回 state 中的 city 值。
`getter.js`中`return`返回`state`中的`city`值。
（3）然後我們還需要在 index.js 中註冊
註冊getters
（4）然後我們就可以訪問到 return 返回的值了
Getter 會暴露為 store.getters 物件，你可以以屬性的形式訪問這些值。
通過store.getters 物件
3、mapGetters
到這裡快結尾了，你應該立刻明白這個輔助函式不過就是簡化而已，不過這裡有幾點要注意一下，此輔助函式是個計算屬性，所以：
- mapMutations放到methods下；
- mapActions放到methods下；
- mapGetters放到computed下。
使用mapGetters輔助函式
4、小結
vuex的整個流程和一系列的輔助函式的使用到處就講完了，大家根據自己的業務需求相應處理；然後就是官網還有更高階的用法，大家也可以自行琢磨。