Vuex 命名空间 namespaced 介绍
接上篇:组件中调用Vuex的state,getters,mutations,actions,modules的数据传递、传参问题
Vuex由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
因此,Vuex 允许我们将 store 分割成模块(module),每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的,这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性,此时就用到了命名空间这个概念。
1.如何使模块成为一个命名空间模块?
你可以在单个模块中通过添加namespaced:true的方式使其成为带命名空间的模块。
const moduleA ={namespaced:true, //开启namespace:true,该模块就成为命名空间模块了state:{count:10,countA:888},getters:{...},mutations:{...},actions:{...}
}
2.组件中如何获取带有命名空间moduleA中的state数据?
1、基本方式:this.$store.state.moduleA.countA
2、mapState辅助函数方式:...mapState({count:state=>state.moduleB.countB})
获取state数据,与https://blog.csdn.net/lzb348110175/article/details/89351059 中的1.State中的取法一样
3.组件中调用命名空间模块中的getters
共有三种方式,如下:
//1.
commonGetter(){this.$store.getters['moduleA/moduleAGetter']
},
//2.
...mapGetters('moduleA',['moduleAGetter']),此处的moduleA,不是以前缀的形式出现!!!
//3.别名状态下
...mapGetters({paramGetter:'moduleA/moduleAGetter'
}),
4.组件中调用命名空间模块中的Mutations
共有三种方式,如下:
//1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
//1.
commonMutation(){this.$store.commit('moduleA/moduleAMutation');
},
//2.
...mapMutations('moduleA',['moduleAMutation']),
//3.别名状态下
...mapMutations({changeNameMutation:'moduleA/moduleAMutation'
}),
5.组件中调用命名空间模块中的Actions(与mutations一致)
共有三种方式,如下:
1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
//1.
commonAction(){this.$store.dispatch('moduleA/moduleAAction')
},
//2.
...mapActions('moduleA',['moduleAAction']),
//3.别名状态下
...mapActions({changeNameAction:'moduleA/moduleAAction'
})
备注:组件中如何对调用的getters,mutations,actions传参,没有发现辅助函数该如何传参,有待实践中继续研究,后续会有补充的.....补充中......补充中
6.带命名空间的moduleA,moduleB模块中,如何获取根store,当前模块,兄弟模块中的action,mutations ,getters方法?
获取根store模块中的:
state数据: 通过rootState参数 即:rootState.属性名
getter方法:通过rootGetters参数来获取 即:rootGetters.increNum
附:向根getters中传递参数方式:rootGetters.increNum({id:11,name:'lucy'});
根store中getters定义接多参数:getters:{ //目前个人研究:只能传递一个参数,或者一个对象
increNum:(state)=>(obj)=>{
console.log(obj)
}
}
提交mutations:commit('increment',null,{root:true}); //increment为根store中的mutation
分发actions:dispatch('incrementAction',null,{root:true}); //incrementAction为根store中的action
参数部分示例:actions:{
moduleAAction({state,commit,dispatch,getters,rootState,rootGetters}){
//处理逻辑
}
}
获取当前模块中的:
state数据:通过state参数来获取 即:state.属性名
getter方法:通过getters参数来执行 即:getters.moduleAIncreNum(); //传递参数:可以是多个,也可以是一个obj对象
提交mutations:通过commit参数来执行 即:commit('moduleAMutation);
分发actions:通过dispatch参数来执行 即:dispatch('nextmoduleAAction');
参数部分示例:actions:{
moduleAAction({state,commit,dispatch,getters,rootState,rootGetters}){
//处理逻辑
}
}
获取兄弟模块中的:(当前模块名:moduleA)
state数据:通过rootState参数来获取 即:rootState.moduleA.属性名
getter方法:通过getters参数来执行 即:rootGetters['moduleB/moduleBGetter']
提交mutations:通过commit参数来执行 即:commit('moduleB/moduleBMutation',{},{root:true});
分发actions:通过dispatch参数来执行 即:dispatch('moduleB/moduleBAction',{},{root:true});
7.在带命名空间的模块中,如何将action注册为全局actions
两个条件:
①添加 root: true
②并将这个 action 的定义放在函数 handler 中
//storeAction在命名空间moduleA中,但是它是一个全局actions
const moduleA = {namespaced:true,storeAction:{root:true, //条件1handler(namespacedContext, payload){//条件2:handler//namespacedContext 上下文信息//payload 载荷,即参数console.log(namespacedContext)console.log(payload)alert("我是模块A中的全局storeAction")}}
}
8.当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时,写起来可能比较繁琐,该怎么解决呢?
computed: {...mapState({a: state => state.some.nested.module.a,b: state => state.some.nested.module.b})
},
methods: {...mapActions(['some/nested/module/foo', // -> this['some/nested/module/foo']()'some/nested/module/bar' // -> this['some/nested/module/bar']()])
}
解决办法:对于这种情况,你可以将模块的空间名称字符串作为第一个参数传递给上述函数,这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为:
computed: {...mapState('some/nested/module', {a: state => state.a,b: state => state.b})
},
methods: {...mapActions('some/nested/module', ['foo', // -> this.foo()'bar' // -> this.bar()])
}
9.除了8中的将空间名称作为第一个参数传递外,还有其它别的方法吗?
你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助函数:
import { createNamespacedHelpers } from 'vuex'const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')export default {computed: {// 在 `some/nested/module` 中查找...mapState({a: state => state.a,b: state => state.b})},methods: {// 在 `some/nested/module` 中查找...mapActions(['foo','bar'])}
}
部分内容摘自Vuex官方文档:https://vuex.vuejs.org/zh/guide/modules.html
总结以上知识点,只为方便以后自己查看,也希望能够帮助到正在看这篇博文的你,全凭自己总结的,可能会有部分错误,希望大家能够理解,也希望大家能够评论指出,谢谢大家。
附:Vue篇笔记目录:
1.Vue组件之间传值问题
2.v-model 用在组件中
3.Vue.js 实战 调查问卷WebApp项目
4.vue-cli + webpack搭建Vue开发环境
5. Vue简单问题汇总(持续更新...)
6.Vue组件之间数据通信之Bus总线
7.Vue-Router导航钩子(附Demo实例)
8.ES6箭头函数与普通函数的区别
9.Vuex的使用
10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数
11.组件中调用Vuex的state,getters,mutations,actions,modules的数据传递、传参问题
12.Vuex命名空间namespaced
13.Vue axios的使用
Vuex 命名空间 namespaced 介绍相关推荐
- vuex的基本介绍和使用
1. vuex作用: 1.1 是一个专为 vue.js 应用程序开发的状态管理模式,集中式存储管理应用的所有组件的状态,以此实现非父子甚至不同组件之间的高效通信 1.2 缓存后端数据,提高用户体验 2 ...
- Vuex——命名空间导致错误[unknown action type:XXX]解决方案
问题描述 [vuex] unknown action type: xxx 官方文档 https://vuex.vuejs.org/zh/guide/actions.html https://vuex. ...
- Vue全家桶 Vuex的详细介绍
文章目录 Vuex状态管理 认识状态管理 Vuex的基本使用
- 状态管理模式 - vuex 的使用介绍
前言 大家好,不知道大家在用 vue 进行开发过程中有没有遇到这样一种场景,就是有些时候一些数据是一种通用的共享数据(比如登录信息),那么这类数据在各个组件模块中可能都会用到,如果每个组件中都去后台重 ...
- 「Vue」vuex 的使用
vuex 概述 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 利用 vuex 集中管理数 ...
- 3.Vue.js 实战 调查问卷WebApp项目
问卷调查demo已上传,欢迎大家指正,欢迎大家下载:https://download.csdn.net/download/lzb348110175/11085995 如果您没积分的话,可以私信/评论, ...
- vuex及其内部核心成员介绍及使用
vuex优点:(1)数据的存取一步到位,不需层层传递:(2)数据的流动非常清晰:(3)存储在Vuex中的数据是响应式的.用大白话说就是可以实现大范围数据共享,尤其是对于非父子关系的组件是非常友好的. ...
- vuex原理以及实现
vuex官方文档 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 每一个 ...
- [vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理 简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
- vuex结合php,Vuex模块化(module)实例详解
本文主要和大家介绍Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较 ...
最新文章
- 在wine里安装了IE6
- 关于SAP S/4HANA里ABAP源代码管理功能的增强
- css3实现背景渐变的方法
- php webview referer,WebView构造中间页自由设置Referrer
- OS开发UI篇—Quartz2D使用(截屏)
- Android 极光IM-基础篇
- python爬淘宝评论源代码_python3爬取淘宝信息代码分析
- 事实表和维度表(重点)
- 使用Python在Windows环境下切换输入法
- swagger的基本使用
- 200 OK(from memory cache)和 200 OK(from disk cache)
- 驾驶证到期换新证流程
- 笔记本锁定计算机功能键,笔记本键盘锁定键在哪_笔记本电脑的“键盘锁”是哪一个键-win7之家...
- STL学习之路(一)
- APP安全性检查报告整改
- flutter自定义广告Banner
- 轻松创建FB和Ins故事广告,提升内容曝光率
- HC-SR04超声波测距模块的高精度使用方法
- django问卷html,Django:动态问卷系统的Model设计
- Git实战技巧-比较不同分支之间的差异和代码的改动
热门文章
- 计算机图形学核心期刊,CCF 推荐国际国内会议及中文核心期刊要目总览
- django3.0入门教程【三】:Hello,world!(完整踩坑笔记)
- 一个亿,啪一下就没了!
- 松下伺服电机uvw接线图_松下Panasonic伺服电机电源线选择与接线方法
- arcgis中python计算面积的表达式_ArcGIS字段计算中的Python语法错误
- UE激活(亲测有效,通过注册机激活)
- 什么是事实表和维度表?什么是维度和度量?
- 51单片机的汇编语言
- 基于Java的网络教学系统
- 用于遥感图像语义分割和单视图高度估计的编码器-双解码器IGARSS2019