了解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对象中,便于我们在组