详解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
});
这样我们就写完整了一个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'
vue.use(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'
vue.use(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'
vue.use(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.$store.mod1.commit('ADD_BOOK',book);//这里需要注意，如果你是用了子模块的这种方法你需要加上模块名这是mod1，如果没有就不需要加。
deleteBook:id=>this.$store.mod1.disaptch('DELETE_BOOK',id);
}
}
</script>
总结：
将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。
好了，这次就简单的介绍到这里，这次主要是介绍怎么用。并没有深入到他的实现原理，对于vue的涉世未深的人来说，我感觉还是够用了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue3使用ref获取dom结果为'null'的原因详析,ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了Vue3编程流畅技巧使用setup语法糖拒绝写return的方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue CLI插件开发，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。这篇文章主要介绍了vue项目前端错误收集之sentry,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3如何使用vant-picker封装省市二级联动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了uni-app 常用API，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要为大家介绍了vue虚拟滚动性能优化方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
基于Vue sessionStorage实现保留搜索框搜索内容
这篇文章主要介绍了基于Vue sessionStorage实现保留搜索框搜索内容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
最新评论