详解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定义的方法是通过store.commit(‘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'vue.use(vuex);export default new vuex.Store({          ststes,          mutatons,          getters,          actions         });