理解Modules
1.什么是
module
?
背景:在
Vue
中State
使用是单一状态树结构,应该的所有的状态都放在state
里面,如果项目比较复杂,那state
是一个很大的对象,store
对象也将对变得非常大,难于管理。module
:可以让每一个模块拥有自己的state
、mutation
、action
、getters
,使得结构非常清晰,方便管理。
2.怎么用
module
?
一般结构
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB})
模块内部的数据:①内部
state
,模块内部的state
是局部的,也就是模块私有的,比如是car.js
模块state
中的list
数据,我们要通过this.$store.state.car.list
获取;②内部getter
、mutation
和action
,仍然注册在全局命名空间内,这是为了多模块可以同时响应同一mutation
;this.$store.state.car.carGetter
的结结果是undefined
,而通过this.$store.state.carGetter
则可以拿到。传参:
getters
====({state
(局部状态),getters
(全局getters
对象),roosState
(根状态)});actions
====({state
(局部状态),commit
,roosState
(根状态)}).