Vuex命名空间namespaced怎么使用

这篇文章主要介绍“Vuex命名空间namespaced怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vuex命名空间namespaced怎么使用”文章能帮助大家解决问题。

在项目中，如果需要用到Vuex，可以将 store 分割成多个模块（module），每个模块拥有自己的 state、mutation、action、getter，这样你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。（ 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。）

如何使模块成为一个命名空间模块？

你可以在单个模块中通过添加namespaced：true的方式使其成为带命名空间的模块。

export default {  namespaced:true,  state,  getters,  actions,  mutations}

组件中如何获取带有命名空间moduleA中的state数据？

1、基本方式：    this.$store.state.moduleA.countA2、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怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。