综琼瑶-狐狸少爷,刘伯温预言,香港侮辱国家议员视频
一、为什么需要模块化
前面我们讲到的例子都在一个状态树里进行，当一个项目比较大时，所有的状态都集中在一起会得到一个比较大的对象，进而显得臃肿，难以维护。为了解决这个问题，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的状态
store.state.b // moduleb的状态
二、模块的局部状态
模块内部的mutation和getter，接收的第一参数（state）是模块的局部状态对象,rootstate
const modulea = {
state: { count: 0},
mutations: {
increment (state) {
// state是模块的局部状态，也就是上面的state
state.count++
}
},
getters: {
doublecount (state, getters, rootstate) {
// 参数 state为当前局部状态，rootstate为根节点状态
return state.count * 2
}
},
actions: {
incremtnifoddrootsum ( { state, commit, rootstate } ) {
// 参数 state为当前局部状态，rootstate为根节点状态
if ((state.cont + rootstate.count) % 2 === 1) {
commit('increment')
}
}
}
}
三、命名空间（这里一定要看，不然有些时候会被坑）
上面所有的例子中，模块内部的action、mutation、getter是注册在全局命名空间的，如果你在modulea和moduleb里分别声明了命名相同的action或者mutation或者getter（叫some），当你使用store.commit('some')，a和b模块会同时响应。所以，如果你希望你的模块更加自包含和提高可重用性，你可以添加namespaced: true的方式，使其成为命名空间模块。当模块被注册后，它的所有getter，action，mutation都会自动根据模块注册的路径调用整个命名，例如：
const store = new vuex.store({
modules: {
account: {
namespaced: true,
state: {...}, // 模块内的状态已经是嵌套的，namespaced不会有影响
getters: { // 每一条注释为调用方法
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。你在使用模块内容时不需要再同一模块内添加空间名前缀，更改namespaced属性后不需要修改模块内的代码。
四、在命名空间模块内访问全局内容（global assets）
如果你希望使用全局state和getter，roorstate和rootgetter会作为第三和第四参数传入getter，也会通过context对象的属性传入action若需要在全局命名空间内分发action或者提交mutation，将{ root: true }作为第三参数传给dispatch或commit即可。
modules: {
foo: {
namespaced: true,
getters: {
// 在这个被命名的模块里，getters被局部化了
// 你可以使用getter的第四个参数来调用 '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
}
}
}
}
五、带命名空间的绑定函数
前面说过，带了命名空间后，调用时必须要写上命名空间，但是这样就比较繁琐，尤其涉及到多层嵌套时（当然开发中别嵌套太多，会晕。。）
下面我们看下一般写法
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'
])
}
}
对于这种情况，你可以将模块的命名空间作为第一个参数传递给上述函数，这样所有的绑定会自动将该模块作为上下文。简化写就是
computed: {
...mapstates('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapactions('some/nested/module',[
'foo',
'bar'
])
}
六、模块重用
有时我们可能创建一个模块的多个实例，例如：
如果我们使用一个纯对象来声明模块的状态，那么这个状态对象会通过引用被共享，导致数据互相污染。
实际上vue组件内data是同样的问题，因此解决办法也是一样的，使用一个函数来声明模块状态（2.3.0+支持）
const mymodule = {
state () {
return {
foo: 'far'
}
}
}
七、总结
到这里模块化（module）的内容就已经讲完了，本次主要讲解了module出现的原因，使用方法，全局和局部namespaced模块命名空间，局部访问全局内容，map函数带有命名空间的绑定函数和模块的重用。
引用
vuex官方文档
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论