vuex理解之modules小記

好記性不如爛筆頭

demo預覽

源代碼

前情提要

關於vuex，其實好久之前就研究使用過，還研究過 flux，redux之類的體系，當時感受對於 state，action，dispatch，views等這套體系流程已經很瞭解，結果呢近一年不用，再次證實了人類大腦的侷限性。這裏不作任何文檔教程，由於官網文檔已經很詳細，這裏只談理解和注意點。

vuex核心

五大核心屬性：

• State
• Getters
• Mutations
• Actions
• Modules

四大輔助函數

• mapState
• mapGetters
• mapActions
• mapMutations

運行流程

• State是數據data的存儲倉庫，可劃分爲子模塊module，每一個module有自立的上下文對象context，有本身的state、mutation、action、getters、modules等等體系

• Getters 主要用來從State中獲取數據，優勢是具備通用性

• Mutations 是用來更新state狀態倉庫裏的數據的，惟一更改數據地方，實時同步修改，不能異步,不能異步,不能異步

• Actions 主要補充增長 異步更新 state倉庫數據的功能，內部依然是觸發Mutation來實現

• Modules 爲了劃分state模塊，便於管理數據倉庫

注意：Getters，Mutations，Actions不管是否是在module塊中，都會直接掛載到 vuex的實例 store上，只有state保持鏈式命名空間，好比，store.state.module[key]等等,因此若是是子模塊的state，直接用輔助函數mapState是獲取不到的.