Vuex 的模塊功能:
Vuex 是可以分模塊的,因爲在我們應用變的越來越大的過程當中,如果只有一個模塊來維護我們的狀態,那麼可能你這個模塊裏面,它的內容就會變的非常多,非常的複雜,對於可維護性就不是那麼高。那麼這個時候,Vuex 就爲我們提供了一個分模塊的功能。
其實模塊的使用方法,跟我們直接使用 Vuex 的方法差不多,但是它裏面會有一些細節的內容來告訴我們具體怎麼去做。
那麼模塊是什麼呢?就是 modules。
在 modules 下面你可以申明各種不同的 state,mutations,getters,actions。
然後你可以給它這個模塊加一個名字,那麼你這個模塊就會有一個作用域。比如:
這就是我們通過不同的模塊去調用它的 state 的方法。
通過 a,b 它們的命名空間,來調用它們專屬的一個 state。
這樣的話,你有不同的模塊,就可以非常清晰的去判斷,你要去調用的是哪個模塊的數據。
那麼如果要通過 mapState 來進行調用呢?
我們就不能通過名字來調用屬性了,必須通過一個對象的映射關係來進行書寫。
mutations:
可以看到,我們也可以直接寫到 mapMutations 裏面去做,它是生效的。
那麼我們爲什麼沒有跟剛纔調用 state 一樣,它要申明一個模塊下面的 mutations 呢?
這是因爲 Vuex 默認會把所有的 mutations 都給它放到全局的命名空間當中。
如果你要讓 a 模塊裏面的 mutations(它的命名空間是在a模塊下面的)不跟我們全局的命名空間進行一個衝突,那麼你需要申明一個屬性 namespaced: true。
那麼這有什麼好處呢?這樣的話,我們每一個模塊裏面,你都可以寫相同名字的 mutations 和 actions。
因爲在 Vuex 裏面,你如果申明瞭2個相同名字的 mutations,那麼它就是一個衝突的關係,你是不可能2個都同時存在的。
因爲作爲一個 object,同一個名字的變量,它就只能有一個。
所以,如果你的 mutations 會變的非常的多,而且你很難控制你每一個 mutations 的名字都是不一樣的。那麼你完全可以加上namespaced: true,如果你加上這個之後,你就會發現我們剛纔的這種調用方法不對。
我們可以看到,Vuex 報錯了,它不知道有這樣一個mutation 的 type。
那這個時候,如果我們要調用這個 mutations,要怎麼做呢?
我們要使用一個命名空間:
所以這就是一個命名空間的概念。
你可以強制給你的模塊去加入一個命名空間,這樣的話,它所有的 mutations,actions,getters 都是在一個命名空間下面。
它們不會起任何的衝突,所以你用的時候,也必須要在這個命名空間的下面。
這樣的一個好處就是你整體的規範性會比較強。
我們要使用 getters,那麼同樣的我們要使用一個命名空間的方法:
但是這樣的話,我們寫在模版裏面就會變的很奇怪,我們沒有辦法很好的去寫,雖然說我們在方法裏面可以進行一個調用。
這種調用方式明顯的不太好,因爲我們要直接在我們的模版裏面去寫,這樣就寫不來了。
那麼我們可以給它命一個名,也就是說,我們這邊的 mapGerrers,我們通過 object 的方式去做。
那麼如果我們要在 a 模塊下面的 getters,裏面的 textPlus 方法裏面,它依賴的值不僅僅是我們這個 a 模塊裏面的值,而是要全局模塊下面的 state ,怎麼做呢?
其實我們在模塊下面的 getters 是會接收到我們全局的 state。
那麼同樣的,在我們的 actions 裏面,我們也可以拿到這些東西。
可以看到,我們在這個 a 模塊裏面去 commit 的 mutations,它默認就是在我們當前這個模塊裏面的mutations。
也就是說,我們在 a 模塊的這個 actions 裏面,它 commit 的 updateText,它會自動在我們申明的 a 模塊裏面去找。
它不會到全局裏面去找。如果你要去全局找,你需要加上一個參數 { root: true }。
所以這就是我們在模塊內部,去調用全局的 mutations。
那麼,同樣的,你調用模塊間的 mutations,你也要使用 { root: true },然後你要把命名空間給它寫完整。
所以這就是我們在使用 Vuex 模塊的時候要注意的一些點。
因爲 Vuex 的模塊功能其實非常的強大,它能夠很好的幫我們去梳理代碼。
但是我們加入了模塊之後,因爲有一個命名空間的存在,所以它的複雜度肯定會相應的增加。
如果這些細節的點你不知道,那麼你會在開發的過程中,遇到非常多的坑要去踩。
然後大家還要注意一點的就是,我們在模塊裏面,還可以再去申明模塊。
它是一個無限向下嵌套的過程,其使用方法也是跟上面一樣的。
你每增加一層模塊,那麼你相應的複雜度就會增加一層,所以你要把這個邏輯給它理清楚。