① vuex：弄懂mapState、mapGetters、mapMutations、mapActions
在引入vuex後，我們需要在state中定義變數，類似於vue中的data，通過state來存放狀態。注冊兩個組件分別引入到app.vue中。
在vue組件中，vhome組件和vabout組件內容顯示了相應的功能。有了vuex，我們不必在考慮組件之間的傳值，直接就可以通過$store來獲取不同的數據，但是當需要vuex中的多個數據時，這種方法就顯得有些啰嗦。這時，我們可以將多個數據定義在computed中，這樣引入的時候就方便了很多。
為了進一步簡化代碼，引入了mapState輔助函數。使用mapState方法，可以將多個數據的引入代碼簡化為一句，相當於下面這些代碼。記住：用mapState等這種輔助函數的時候，前面的方法名和獲取的屬性名是一致的。
如果需要自定義計算屬性，可以使用es6中的展開運算符。比如，如果我們需要計算一些自定義屬性，可以使用這樣的方式來引入。
在處理數據時，可以使用getters，相當於vue中的計算屬性，通過getters進一步處理，得到我們想要的值，並且允許傳參，第一個參數就是state。這樣可以使代碼更加簡潔和靈活。
在代碼中定義的需要修改數據的操作，我們使用mutations。它類似於vue中的methods，需要通過commit來調用其裡面的方法，並且可以傳入參數，第一個參數是state，第二個參數是載荷（payLoad），也就是額外的參數。代碼如下，模板部分和js部分的引入展示了mutations的使用。
為了簡化代碼，引入了mapMutations，通過它將方法映射過來，這樣就可以避免在代碼中頻繁地寫出多個mutations方法，使得代碼更加整潔。但是，為什麼要繞一圈，從mutations裡面去改state呢？實際上，mutations不僅可以做賦值操作，還可以進行類似埋點的操作，如果從mutations中操作，可以被檢測到，可以更方便地使用調試工具調試，調試工具可以檢測到實時變化，而直接改變state中的屬性，則無法實時監測。
為了避免字元串寫錯導致的問題，推薦使用常量替代Mutation事件類型。代碼如下，將方法名字定義為一個常量，這樣寫的好處是不容易寫錯，且當寫錯時，eslint可以提示錯誤位置。同時，可以新建一個文件（mutation_type.js）專門存儲這些常量，然後在store/index.js中引入。
在實際開發中，通常需要在actions中處理非同步操作，如請求數據。actions類似於mutation，但區別在於action可以提交mutation，並且action包含非同步操作，比如axios請求，可以將這些操作都放在action中。在actions中定義的方法默認就是非同步的，並且返回promise。在vue部分，可以使用mapActions(['getUserInfo'])來替代直接引入多個方法，這樣更加簡潔。
在獲取用戶信息的場景中，通常在頁面載入後，通過調用actions中的getUserInfo方法來獲取用戶信息。當登錄後，需要得到用戶信息，這時，首先想到的就是通過actions來操作mutations從而操作state。在actions中定義getUserInfo方法，然後在vue部分調用此方法，通過commit調用setUserInfo，將用戶信息作為參數傳入，將相對應的屬性值賦值給state，完成這一過程的操作。在實際操作中，可以使用解構的方式，讓代碼更加清晰和便捷。