Vuex 命名空间 namespaced的使用
作者：前端小胖虎
本文主要介绍了Vuex 命名空间 namespaced的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在项目中，如果需要用到Vuex，可以将 store 分割成多个模块（module），每个模块拥有自己的 state、mutation、action、getter，这样你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。（ 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。）
1.如何使模块成为一个命名空间模块？
你可以在单个模块中通过添加namespaced：true的方式使其成为带命名空间的模块。
export default {
namespaced:true,
state,
getters,
actions,
mutations
}
2.组件中如何获取带有命名空间moduleA中的state数据？
1、基本方式：
this.$store.state.moduleA.countA
2、mapState辅助函数方式：
...mapState({
count:state=>state.moduleB.countB
})
【例子】
computed:mapState({
// 将state中的商品列表数据作为goodslist的属性
goodslist:state=>state.goods.list
}),
组件中调用命名空间模块中的getters
computed:{
// 使用扩展运算符“...”,将mapState和mapGetters返回的结果放到计算属性中
...mapState({
// 绑定购物车中的商品
items:state=>state.shopcart.items
}),
// 绑定购物车中的商品总价
...mapGetters('shopcart',{total:'totalPrice'})
},
到此这篇关于Vuex 命名空间 namespaced的使用的文章就介绍到这了,更多相关Vuex 命名空间 namespaced内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！