【移動應(yīng)用開發(fā)技術(shù)】Vuex為什么需要模塊化

【移動應(yīng)用開發(fā)技術(shù)】Vuex為什么需要模塊化

這篇文章主要介紹Vuex為什么需要模塊化，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！一、為什么需要模塊化前面我們講到的例子都在一個狀態(tài)樹里進行，當(dāng)一個項目比較大時，所有的狀態(tài)都集中在一起會得到一個比較大的對象，進而顯得臃腫，難以維護。為了解決這個問題，Vuex允許我們將store分割成模塊（module），每個module有自己的state，mutation，action，getter，甚至還可以往下嵌套模塊，下面我們看一個典型的模塊化例子const

moduleA

=

{

state:

{},

mutations:

{},

actions:

{},

getters:

{}

}

const

moduleB

=

{

state:

{},

mutations:

{},

actions:

{},

getters:

{}

}

const

store

=

new

Vuex.Store({

modules:

{

a:

moduleA,

b:

moduleB

}

})

store.state.a

//

moduleA的狀態(tài)

store.state.b

//

moduleB的狀態(tài)二、模塊的局部狀態(tài)模塊內(nèi)部的mutation和getter，接收的第一參數(shù)（state）是模塊的局部狀態(tài)對象,rootStateconst

moduleA

=

{

state:

{

count:

0},

mutations:

{

increment

(state)

{

//

state是模塊的局部狀態(tài)，也就是上面的state

state.count++

}

},

getters:

{

doubleCount

(state,

getters,

rootState)

{

//

參數(shù)

state為當(dāng)前局部狀態(tài)，rootState為根節(jié)點狀態(tài)

return

state.count

*

2

}

},

actions:

{

incremtnIfOddRootSum

(

{

state,

commit,

rootState

}

)

{

//

參數(shù)

state為當(dāng)前局部狀態(tài)，rootState為根節(jié)點狀態(tài)

if

((state.cont

+

rootState.count)

%

2

===

1)

{

commit('increment')

}

}

}

}三、命名空間（這里一定要看，不然有些時候會被坑）上面所有的例子中，模塊內(nèi)部的action、mutation、getter是注冊在全局命名空間的，如果你在moduleA和moduleB里分別聲明了命名相同的action或者mutation或者getter（叫some），當(dāng)你使用mit('some')，A和B模塊會同時響應(yīng)。所以，如果你希望你的模塊更加自包含和提高可重用性，你可以添加namespaced:true的方式，使其成為命名空間模塊。當(dāng)模塊被注冊后，它的所有g(shù)etter，action，mutation都會自動根據(jù)模塊注冊的路徑調(diào)用整個命名，例如：const

store

=

new

Vuex.Store({

modules:

{

account:

{

namespaced:

true,

state:

{...},

//

模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的，namespaced不會有影響

getters:

{

//

每一條注釋為調(diào)用方法

isAdmin

()

{

...

}

//

getters['account/isAdmin']

},

actions:

{

login

()

{...}

//

dispatch('account/login')

},

mutations:

{

login

()

{...}

//

commit('account/login')

},

modules:

{

//

繼承父模塊的命名空間

myPage

:

{

state:

{...},

getters:

{

profile

()

{...}

//

getters['account/profile']

}

},

posts:

{

//

進一步嵌套命名空間

namespaced:

true,

getters:

{

popular

()

{...}

//

getters['account/posts/popular']

}

}

}

}

}

})啟用了命名空間的getter和action會收到局部化的getter，dispatch和commit。你在使用模塊內(nèi)容時不需要再同一模塊內(nèi)添加空間名前綴，更改namespaced屬性后不需要修改模塊內(nèi)的代碼。四、在命名空間模塊內(nèi)訪問全局內(nèi)容（GlobalAssets）如果你希望使用全局state和getter，roorState和rootGetter會作為第三和第四參數(shù)傳入getter，也會通過context對象的屬性傳入action若需要在全局命名空間內(nèi)分發(fā)action或者提交mutation，將{root:true}作為第三參數(shù)傳給dispatch或commit即可。modules:

{

foo:

{

namespaced:

true,

getters:

{

//

在這個被命名的模塊里，getters被局部化了

//

你可以使用getter的第四個參數(shù)來調(diào)用

'rootGetters'

someGetter

(state,

getters,

rootSate,

rootGetters)

{

getters.someOtherGetter

//

->

局部的getter，

‘foo/someOtherGetter'

rootGetters.someOtherGetter

//

->

全局getter,

'someOtherGetter'

}

},

actions:

{

//

在這個模塊里，dispatch和commit也被局部化了

//

他們可以接受root屬性以訪問跟dispatch和commit

smoeActino

({dispatch,

commit,

getters,

rootGetters

})

{

getters.someGetter

//

'foo/someGetter'

rootGetters.someGetter

//

'someGetter'

dispatch('someOtherAction')

//

'foo/someOtherAction'

dispatch('someOtherAction',

null,

{root:

true})

//

=>

‘someOtherAction'

commit('someMutation')

//

'foo/someMutation'

commit('someMutation',

null,

{

root:

true

})

//

someMutation

}

}

}

}五、帶命名空間的綁定函數(shù)前面說過，帶了命名空間后，調(diào)用時必須要寫上命名空間，但是這樣就比較繁瑣，尤其涉及到多層嵌套時（當(dāng)然開發(fā)中別嵌套太多，會暈。。）下面我們看下一般寫法computed:

{

...mapState({

a:

state

=>

state.some.nested.module.a,

b:

state

=>

state.some.nested.module.b

}),

methods:

{

...mapActions([

'some/nested/module/foo',

'some/nested/module/bar'

])

}

}對于這種情況，你可以將模塊的命名空間作為第一個參數(shù)傳遞給上述函數(shù)，這樣所有的綁定會自動將該模塊作為上下文。簡化寫就是computed:

{

...mapStates('some/nested/module',

{

a:

state

=>

state.a,

b:

state

=>

state.b

})

},

methods:

{

...mapActions('some/nested/module',[

'foo',

'bar'

])

}六、模塊重用有時我們可能創(chuàng)建一個模塊的多個實例，例如：創(chuàng)建多個store，他