36、vuex初探（四）

摘要： 前言：上一章我們將倉庫拆分成了四個檔案，這一章我們講下 mapState 、 mapActions 這兩個輔助函式。 GitHub： https://github.com/Ewall1106/mall 1、關於輔助函式 （1）首先我們需要明確一點的就是，像 mapStat...

前言：上一章我們將倉庫拆分成了四個檔案，這一章我們講下 mapState 、 mapActions 這兩個輔助函式。

GitHub： ofollow,noindex">https://github.com/Ewall1106/mall

1、關於輔助函式

（1）首先我們需要明確一點的就是，像 mapState 這些都是輔助函式，只不過是一種簡寫方法，讓你少按幾次鍵而已。以 mapState輔助函式 為例：

當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵。

（2）注意事項

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

2、mapState

（1）讓我們進入 test.vue 檔案中，我們以前獲取 vuex 中 state 的 city 資料直接使用的是：

this.$store.state.city

但是，如果要引用 state 中的很多資料怎麼辦？

（2）這時候，就是 mapState 這個輔助函式派上用場了，可以幫我們簡化操作。

• 首先當然得從 vuex 中引入 mapState ；
• 然後我們在 computed 計算屬性中使用這個輔助函式。

3、mapActions

（1） mapState 輔助函式是獲取 vuex 中 state 物件的值，而 mapActions 對應的是哪個操作呢？——就是把 dispatch 方法分發 action 這個操作簡化。（這裡不懂的可以看前章：vuex初探（二））

（2）所以，讓我們進入到 testCity.vue 頁面：

mapActions
methods

4、小結

• 這章講了 vuex 中的兩個輔助函式，其實沒什麼難的，其本質不過就是簡化程式碼而已。
• 下章我們講 mapMutations 和 mapGetters 這兩個輔助函式，雖然本質都是一樣同為簡化操作，但是使用的過程中與本章講的兩個還是有些許不同。