vuex命名空间用途,vue 命名空间
本文主要介绍了状态管理命名空间的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
Vuex由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，商店对象就有可能变得相当臃肿。
因此，Vuex允许我们将商店分割成模块（模块),每个模块拥有自己的状态、突变、动作、获取者、甚至是嵌套子模块。
默认情况下，模块内部的动作、突变和吸气剂是注册在全局命名空间的，这样使得多个模块能够对同一变化或行为作出响应。如果希望你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。
{
模块1:{
状态：{},
getter:{ }，
突变：{},
动作：{}
},
模块2:{
状态：{},
getter:{ }，
突变：{},
动作：{}
}
}
地图状态、地图获取者、地图突变、地图操作第一个参数是字符串（命名空间名称),第二个参数是数组（不需要重命名)/对象（需要重命名)。
mapXXXs(命名空间名称,[属性名1,属性名2])
mapXXXs(命名空间名称,{
组件中的新名称1:Vuex中的原名称1,
组件中的新名称2:Vuex中的原名称2,
})
项目结构
mian.js
从“Vue”导入Vue
从导入应用程序. 1/app。vue ；
从导入路由器./路由器；
从导入存储. store/index ；
vue。配置。生产提示=假；
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount( # app )；
索引。射流研究…
从“Vue”导入Vue
从" Vuex "导入Vuex
从导入猫./modules/cat ；
从导入狗.模块/狗；
vue。使用(Vuex)；
导出默认的新Vuex .商店({
模块：{猫，狗}
});
cat.js
导出默认值{
命名空间：对，
//局部状态
状态：{
名称： 蓝白英短，
年龄：1岁
},
//局部读取
getters: {
desc: state=宠物： state.name
},
//局部变化
突变：{
增量（状态、有效负载){
状态。年龄=有效载荷。num
}
},
//局部动作
动作：{
增长（上下文、负载){
setTimeout(()={
context.commit(increment ，payload)；
}, 1000);
}
}
};
dog.js
导出默认值{
命名空间：对，
//局部状态
状态：{
名称： 拉布拉多，
年龄：1岁
},
//局部读取
getters: {
desc: state=宠物： state.name
},
//局部变化
突变：{
增量（状态、有效负载){
状态。年龄=有效载荷。num
}
},
//局部动作
动作：{
增长（上下文、负载){
setTimeout(()={
context.commit(increment ，payload)；
}, 1000);
}
}
};
你好100 . vue
模板
你好
h3Vuex状态树/h3
部门{ {这个. store.state}}/div
h3mapState/h3
div{{catName}} {{catAge}}/div
部门{ {狗名} } { {狗名} }/分区
h3mapGetters/h3
div{{catDesc}}/div
div{{dogDesc}}/div
h3map突变/h3
button @ click= ca increment({ num:1 })猫变化/按钮
button @ click= dog increment({ num:1 })狗变化/按钮
h3mapActions/h3
button @click=catGrow({num:1})猫动作/按钮
button @click=dogGrow({num:1})狗动作/按钮
/div
/模板
脚本
从" vuex "导入{ mapState，mapGetters，mapMutations，map actions }。
导出默认值{
名称：“HelloWorld”，
计算值：{
.mapState(cat ，{
类别名："名称",
分类："年龄"
}),
.mapState(dog ，{
狗名："名称",
狗食："年龄"
}),
.mapGetters(cat ，{
《Desc》
}),
.mapGetters(dog ，{
《Desc》
})
},
方法：{
.mapMutations(cat ，{ ca increment: increment })，
.mapMutations(dog ，{ dogIncrement: increment })，
.mapActions(cat ，{ catGrow: grow })，
.mapActions(dog ，{ dogGrow: grow })
}
};
/脚本
！-添加“scoped”属性以将CSS仅限制到此组件-
样式范围的语言=scss
/风格
操作效果
关于vuex名称空间的使用，本文到此结束。有关vuex名称空间的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。