这篇文章主要介绍“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怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。