Vuex基礎(四):模塊功能 modules

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 的模塊功能其實非常的強大,它能夠很好的幫我們去梳理代碼。

但是我們加入了模塊之後,因爲有一個命名空間的存在,所以它的複雜度肯定會相應的增加。

如果這些細節的點你不知道,那麼你會在開發的過程中,遇到非常多的坑要去踩。

然後大家還要注意一點的就是,我們在模塊裏面,還可以再去申明模塊。

它是一個無限向下嵌套的過程,其使用方法也是跟上面一樣的。

你每增加一層模塊,那麼你相應的複雜度就會增加一層,所以你要把這個邏輯給它理清楚。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章