vuex中module应该如何使用,vuex的module的功能
本文主要介绍vuex中模块使用的详细说明，通过示例代码详细介绍。对大家的学习或工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
前言1。什么是模块2，模块3的内部参数。模块的命名空间(1) Namespace: true使模块成为具有命名空间的模块(2)使用具有命名空间的绑定函数4 .模块的动态注册写在最后。
前言
在Vue中，状态是一个单一的状态树结构，所有的状态都应该放在状态中。如果项目比较复杂，状态是一个大对象，那么存储对象就会变得非常大，很难管理。所以Vuex中还有另一个核心概念模块。本文将总结模块的相关知识点。
1 、什么是模块Modules
Vuex允许我们将存储划分成模块，每个模块都有自己的状态、getters、变异、动作等。甚至嵌套的子模块3354也以相同的方式从上到下划分。
常数模块A={
状态：()=({.}),
突变：{.},
动作：{.},
getters: {.}
}
常数模块B={
状态：()=({.}),
突变：{.},
动作：{.}
}
const store=new Vuex。商店({
模块：{
答：模块a，
b:模块b
}
})
this . store . state . a//-获取moduleA的状态
this . store . state . b//-获取moduleB的状态
内部状态，模块内部的状态是局部的，即模块是私有的，
内部的getter、mutation、action动作仍然在全局名称空间中注册，这样多个模块就可以响应同一个突变或动作。
2、模块内部参数问题
对于模块内部的突变和getter，收到的第一个参数是模块的本地状态对象状态。
对于模块内部的动作，本地状态通过context.state公开，根节点状态为context.rootState:
对于模块内部的getter，根节点状态将作为第三个参数公开：
常数模块A={
状态：()=({
计数：，
}),
动作：{
//这里的状态是本地的，rootState是根节点状态。
incrementIfOddOnRootSum ({ state，commit，rootState }) {
if((state . count root state . count)% 2===1){
提交(“增量”)
}
}
}
突变：{
//这里的“state”对象是模块的本地状态。
增量(状态){
状态.计数
}
},
getters: {
//这里的状态是本地的，rootState是根节点状态。
双重计数(州){
返回state.count * 2
},
sumWithRootCount (state，getters，rootState) {
返回状态.计数根状态.计数
}
}
}
3、模块命名空间问题
（1）namespaced: true 使模块成为带命名空间的模块
当一个模块被注册时，它所有的getter、action和mutation都会根据模块的注册路径自动命名。
const store=new Vuex。商店({
模块：{
账户：{
命名空间：对，
//模块资产在使用模块资产时，不需要在同一个模块中添加额外的空格名称前缀。
State: ()=({})，//模块中的状态已经嵌套，使用` namespaced属性不会对其产生影响。
getters: {
Is () {}，//-using:getters[ account/is admin ]，
//可以使用getter的第四个参数来调用
someGetter(state，getters，rootState，rootGetters) {
//getters.isAdmin
//rootGetters.someOtherGetter
},
},
动作：{
Login() {}，//-Use: dispatch(account/login )
//可以使用action的第四个参数来调用
//若需要在全局命名空间内分发行为或提交突变，将{ root: true }作为第三参数传给派遣或犯罪即可
someAction({ dispatch，commit，getters，rootGetters }) {
//getters。是admin
//根getters。一些吸气剂；
//dispatch( someOtherAction )；
//dispatch(someOtherAction ，null，{ root:true })；
//提交(‘某突变’)；
//commit(someMutation ，null，{ root:true })；
},
someOtherAction(ctx，有效负载){},
//若需要在带命名空间的模块注册全局行动，你可添加根：没错，并将这个行为的定义放在函数处理者中。
其他操作：{
根：没错，
处理程序(namespacedContext有效负载){}，//- someAction
},
},
突变：{
login() {}，//-使用：提交("帐户/登录")
},
//嵌套模块
模块：{
//继承父模块的命名空间
我的页面：{
state: ()=({})，
getters: {
profile() {}，//-使用：getters[帐户/配置文件]
},
},
//进一步嵌套命名空间
帖子：{
命名空间：对，
state: ()=({})，
getters: {
popular() {}，//-使用：getters[帐户/帖子/热门]
},
},
},
},
},
});
（2）带命名空间的绑定函数的使用
当使用mapState，mapGetters，mapActions和地图突变这些函数来绑定带命名空间的模块时，写起来可能比较繁琐：
计算值：{
.mapState({
答：州=州。一些。嵌套。模块。一，
b:州=州。一些。嵌套。模块。b
})
},
方法：{
.地图操作([
some/nested/module/foo ，//-this[ some/nested/module/foo ]()
some/nested/module/bar //-this[ some/nested/module/bar ]()
])
}
createNamespacedHelpers创建基于某个命名空间辅助函数，它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数。
从" vuex "导入{ createNamespacedHelpers }
const { mapState，map actions }=createNamespacedHelpers( some/nested/module )
导出默认值{
计算值：{
//在`某些/嵌套/模块中查找
.mapState({
a: state=state.a，
州=州
})
},
方法：{
//在`某些/嵌套/模块中查找
.地图操作([
foo ，
酒吧
])
}
}
4、模块动态注册
在商店创建之后，你可以使用商店。注册模块方法注册模块
从" vuex "导入状态管理
const store=new Vuex .商店({ /*选项*/})
//注册模块`我的模块
store.registerModule(myModule ，{
//.
})
//注册嵌套模块`嵌套/我的模块
store.registerModule([nested ， myModule]，{
//.
})
之后就可以通过商店。状态。我的模块和store.state.nested.myModule访问模块的状态。
也可以使用商店。注销模块(moduleName)来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建商店时声明的模块)。
可以通过store.hasModule(moduleName)方法检查该模块是否已经被注册到商店。
写在最后
到此这篇关于状态管理中模块的使用详解的文章就介绍到这了，更多相关状态管理模块内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。