vuex入門篇 -- module

前言

以前的入門篇文章咱們去了解了state，getter，mutation，action。本篇文章咱們專門來說一下module這個關鍵字的內容。

---

正文

module的意思是模塊，咱們這裏要說一下編寫的store的結構形式，是以一個根節點對象，多個模塊節點對象組成的，一個樹狀結構。

vuex因爲使用單一狀態樹，因此若是隻有一個節點的話，在大型項目下，一個狀態對象就會十分的臃腫，因此module實際上就是分化這些狀態的利器，同時也就是爲其樹添加子節點內容的關鍵點。

每個模塊都擁有相對獨立的state，getter，mutation，action， 同時也是能夠擁有本身的子模塊的。這樣將會清晰的劃分出咱們須要的狀態信息。針對於工程清晰的歸類將會有助於咱們更爲方便的運用。

固然咱們在以前的文章之中提到的namespaced的操做注意點，那麼爲何會有這一屬性內容的設置呢，其實是爲了模塊的內聚和複用性考慮的。

• 默認狀況下，咱們雖然編寫了模塊，可是實際上它們的內容依舊是註冊在全局命名空間之中（就是咱們所說的根狀態管理對象）。
• 而當咱們設置了namespaced以後，模塊之中的state，getter，mutation，action都會依據模塊的註冊路徑調整命名，以此來達到相對的內容獨立。

因爲模塊能夠嵌套，那麼模塊在設置了namespaced以後，子模塊的信息會怎麼樣呢？

• 子模塊沒有設置namespaced的時候會怎麼樣呢。這個時候，子模塊的內容將會被註冊在當前模塊下面，例若有一個模塊爲user，設置了命名空間，其有一個子模塊user_child,沒有設置命名空間，這個時候，咱們經過this.$store對象發現，user_child下的內容會所有的註冊到路徑user/下面，即其註冊成爲了user模塊的內容。
• 若是user_child設置了命名空間，那麼咱們能夠看到其內容註冊路徑是user/user_child/（這個時候咱們經過mapState等等方法來導入內容的時候命名空間傳值使用user/user_child）

既然咱們將狀態模塊化了，那麼模塊之中的內容如何訪問跟對象的內容呢？這裏咱們須要說起一下以前action學習時提到過的context參數內容，即action對象中數據項方法能夠獲取的參數，它是一個對象內容，其中有rootState,和rootGetter，同時也有state和getter，用root修飾的，實際上就是根狀態管理對象，而沒有root修飾的，就是當前模塊之中的內容，因此咱們在模塊之中想要訪問到根對象內容的時候是可能的。

能夠在action中訪問全局內容，一樣也可在模塊的action之中註冊全局的action，這個時候只須要咱們傳遞給action對象數據項的值是一個對象，其中包含兩個數據內容root（布爾類型，設置true表示全局），還有一個handler（處理函數），這樣就能夠註冊一個全局的內容了。

接下來咱們說說動態註冊模塊。store對象之中提供了registerModule方法，傳遞三個參數，第一個是namespaced的描述，一個是狀態對象內容（即state這些關鍵字的設置），還有一個是option對象內容。命名空間的描述能夠是字符串或者數組，數組的意思就是子模塊，舉個例子['user', 'child']，這表示的是user模塊的child子模塊的內容，新增的模塊內容就是child子模塊內容。或者字符串傳遞'user'，着表示新增的內容是user模塊。最後的option對象能夠傳遞一些設置，幫助咱們更好的建立或者覆蓋模塊。例如preserveState這個屬性（前提是用於覆蓋已有的模塊），傳遞過去以後將會重寫已有模塊的getter，mutation和action。可是state將會保留下來。

---

###結束 這一篇文章可能有點難看下來，基本上都是一些概述性的文字，索性概念都還簡單，若是有發現不正確或者歧義的地方，記得告知我喲。祝願共同成長，共同進步。拜拜