Vuex 命名空间 namespaced的使用
更新时间：2023年03月05日 10:00:08 作者：前端小胖虎
本文主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在基于UniApp开发跨平台应用时,开发者通过特定语法来管理和加载应用程序的各种资源文件,如图片、字体、音频、视频等,在uni-app中,资源通常会被组织在项目的各个目录下,本文给大家介绍了uni-app资源引用的方法汇总,需要的朋友可以参考下2025-01-01
Element-ui之ElScrollBar组件滚动条的使用方法
这篇文章主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue 一键清空表单的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Vue3 Teleport 组件的实践及原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了详解Vue2.0配置mint-ui踩过的那些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本篇文章主要介绍了Vue全家桶实践项目总结(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
本文主要介绍了django+vue项目搭建实现前后端通信，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家详细介绍了vue开发树形结构组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
跨域问题是由浏览器引起的安全限制,而不是Vue框架本身导致的,Vue本身并不限制跨域访问,它只是一个前端框架,负责构建用户界面和处理数据逻辑,本文给大家介绍了在Vue中解决跨域问题的常用方式,需要的朋友可以参考下2023-10-10
最新评论