详解vuex之store拆分即多模块状态管理（modules）篇

详解vuex之store拆分即多模块状态管理（modules）篇
了解vuex的朋友都知道它是vue⽤来集中管理状态的容器，如果了解过Reduce的朋友可能看见他时就会⾮常熟悉，都是⽤来管理全局的状态的，实现不同组件之间相互的数据访问。

这⾥我们不介绍vuex,主要介绍vuex拆分store以及多模块管理。

我们知道如果⼀个项⽬⾮常⼤的话状态就会⾮常的多，如果不进⾏分类处理，所有的状态都维护在⼀个state⾥⾯的话，状态管理就会变得⾮常的混乱，这样⾮常不利于项⽬的后期维护。

我们现在前端推崇模块化开发，为的就是提⾼开发效率和维护效率，避免重复⼯作。

那么vuex是怎么样解决这个问题的呢？这个时候我们今天要讲的主⾓modules就要闪亮登场了。

其实这个⽤起来是⾮常简单的，正常情况下，我们在⽤vuex的时候我们是这样定义的：
states.js //保存应⽤的状态值
export default {
bookList:["西游记","⽔浒传","红楼梦","三国演义"]
}
mutations.js //在这个⽂件中定义对状态值的操作，增删改查。

export default {//这⾥要注意不要在mutations⾥⾯进⾏异步操作
ADD_BOOK(state,book){
state.bookList.push(book);
return true;
},
DELETE_BOOK(state,id){
}
}
getters.js //将我们在states中定义的值暴露在store.getters对象中，便于我们在组件中可以通过store.getters对象中，便于我们在组件中可以通过store.getters.bookList访问数据
export default {
bookList:function(state){
return state.bookList;
}
}
actions.js //其实这⾥定义的⽅法只是将mutation.js中定义的⽅法进⾏了⼀次封装,就是去触发mutations.js中的⽅法。

如果传如的参数需要异步获取的话，我们可以在这⾥等待异步返回成功后在触发mutations中的⽅法。

在组件中这两个⽂件定义的⽅法都可以直接调⽤，mutations中定义的⽅法是通过store.dispath(′ADDBOOK′,book)调⽤的，⽽actons定义的⽅法是通过store.dispath(′ADDBOOK′,book)调⽤的，⽽actons定义的⽅法是通过mit(‘ADD_BOOK',book),调⽤的。

export default {//在action中可以进⾏异步操作。

add_book({commit},book){
commit('ADD_BOOK',book);
},
delete_book({commit},book){
commit('DELETE_BOOK',id);
}
}
这⾥有时我们还可能会看见⼀个⽂件叫mutations_type.js其实这个⽂件定义的是mutations中的⽅法名,我⾃⼰在⽤的时候反正没定义这个⽂件，⾃⼰看着办如果喜欢你就定义上。

上⾯定义的⽂件定义好了之后，我们就可以将我们定义的这些对象加⼊到vuex的Store中去了
store.js
import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
e(vuex);
export default new vuex.Store({
ststes,
mutatons,
getters,
actions
});
这样我们就写完整了⼀个store了。

我们可以看出这⾥我们只有⼀个总模块，那如果我们要将总模块拆分成⼏个⼩模块，那应该怎样定义呢？
import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
e(vuex);
export default new vuex.Store({
modules:{
mod1:{
states,
mutatons,
getters,
actions
},
mod2:{}
}
});
import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
e(vuex);
export default new vuex.Store({
modules:{
mod1:{states,
mutatons,
getters,
actions
},
mod2:{}
}
});
我⾃⼰在做项⽬的时候我⼀般将⼀个⼦模块的state，mutations，actions，getter写在⼀个⽂件中如:
mod1.js
export default {
state:{},
mutatons:{},
actions:{},
getters:{}
}
mod2.js
export default {
state:{},
mutatons:{},
actions:{},
getters:{}
}
然后在将⼏个mod合并到store中去：
import vue from 'vue'
import vuex from 'vuex'
import mod1 from './mod1.js'
import mod2 from './mod2.js'
e(vuex);
export default new vuex.Store({
modules:{
mod1:mod1,
mod2:mod1
}
});
我感觉这样写的话代码结构更加直观，清晰。

⽽且正常的话⼀个⼦模块⼀般不会有太多的状态和⽅法。

当然如果项⽬中⼦模块的状态和⽅法确实太多，我们还是推荐将state,actions,getters,mutations单独写在不同的⽂件中，然后将不同的⼦模块的这些⽂件放在⼀个⽂件夹中，这样就代表⼀个⼦状态管理模块。

通过将总的store拆分过后，我们在状态管理和维护的时候就更加清晰了。

在创建出store后，我们需要将store挂载到vue上去
import vue from 'vue'
import store from './store'
var vue = new Vue({
store,
····
}).$mount("#app")
之后在组建中就可以使⽤和管理前⾯定义的状态了，
<template>
</template>
<script>
export default{
computed{
bookList:this.$store.mod1.bookList,
},
methods:{
addBook:book=>this.$mit('ADD_BOOK',book);//这⾥需要注意，如果你是⽤了⼦模块的这种⽅法你需要加上模块名这是mod1，如果没有就不需要加。

deleteBook:id=>this.$store.mod1.disaptch('DELETE_BOOK',id);
}
}
</script>
总结：
将store进⾏拆分，有利于我们更好的管理项⽬中的状态，以及使我们的项⽬维护更加加单⾼效。

各个模块之间的开发互相不影响。

好了，这次就简单的介绍到这⾥，这次主要是介绍怎么⽤。

并没有深⼊到他的实现原理，对于vue的涉世未深的⼈来说，我感觉还是够⽤了。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。