vuex 源码分析(六) 辅助函数 详解
对于state、getter、mutation、action来说，如果每次使用的时候都用this.$store.state、this.$store.getter等引用，会比较麻烦，代码也重复和冗余，我们可以用辅助函数来帮助我们生成要的代码，辅助函数有如下四个:
mapState(namespace, map) ;用于获取state
mapGetters(namespace, map) ;用于获取getters
mapMutations(namespace, map) ;用于获取mutations
mapActions(namespace, map) ;用于获取actions
每个辅助函数都可以带两个参数:
namespace ;命名空间，也就是模块名
map ;要获取的信息
map有两种用法，可以是对象(键名是当前Vue实例设置的变量名，值是从store要获取的变量名)或者字符串数组(此时获取和设置的变量名为同一个)。
注:使用辅助函数需要在根节点注入store
ps:很多新手可能只会使用辅助函数，不知道还可以用this.$store.state,this.$store.getter这些用法...
这些辅助函数返回的都是一个对象，我们可以配合ES6的对象展开运算符，我们可以极大地简化写法，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
<div id="app">
<p>{{no}}</p>
<p>{{No}}</p>
<button @click="test1">测试1</button>
<button @click="test2">测试2</button>
</div>
<script>
const store = new Vuex.Store({
state:{no:100},
getters:{
No:function(state){return state.no+100}
},
mutations:{
increment(state,payload){state.no+=payload.no;}
},
actions:{
increment({commit},info){
setTimeout(function(){
commit('increment',info)
},500)
}
}
})
var app = new Vue({
el:"#app",
store,
computed:{
...Vuex.mapState(['no']),
...Vuex.mapGetters(['No'])
},
methods:{
...Vuex.mapMutations(['increment']),
...Vuex.mapActions({increment1:"increment"}),
test1(){
this.increment({no:100})
},
test2(){
this.increment1({no:200})
}
}
})
</script>
</body>
</html>
writer by:大沙漠 QQ:22969969
我觉得吧，如果用到的vuex里的属性比较多还好一点，如果只用到一个state还不如用this.$store.state来获取呢，毕竟在node环境下还需要import{mapState} from 'vuex'来获取导出的符号，可以看页面具体的需求选择合理的方法。
源码分析
vuex内的所有辅助函数格式都一样，都是执行一个normalizeNamespace()函数，并传入一个匿名函数，该匿名函数带有两个参数，分别是namespace和map，以mapState为例，如下:
var mapState = normalizeNamespace(function (namespace, states) { //state辅助函数 name:命名空间 states:比如:count2: "count"
var res = {};
normalizeMap(states).forEach(function (ref) { //将states转换为对象格式，例如:[{key:count2,val:count}]
var key = ref.key;
var val = ref.val;
res[key] = function mappedState () { //计算属性对应的是一个函数，该函数内的this指向的是Vue实例
var state = this.$store.state; //获取state对象
var getters = this.$store.getters; //获取getters对象
if (namespace) {
var module = getModuleByNamespace(this.$store, 'mapState', namespace);
if (!module) {
return
}
state = module.context.state;
getters = module.context.getters;
}
return typeof val === 'function'
? val.call(this, state, getters) //state是函数时的逻辑,获取子模块的state会执行到这里
: state[val] //返回state[val],也就是值
};
// mark vuex getter for devtools
res[key].vuex = true;
});
return res
});
normalizeNamespace是统一的一个入口，用于格式化所有的辅助函数，如下:
function normalizeNamespace (fn) { //返回一个匿名函数，需要两个参数，分别是命名空间和映射，参数1可以省略
return function (namespace, map) {
if (typeof namespace !== 'string') { //如果参数1不是字符串(即忽略了命名空间)
map = namespace; //则修正参数1为map
namespace = ''; //重置命名空间为null
} else if (namespace.charAt(namespace.length - 1) !== '/') {
namespace += '/';
}
return fn(namespace, map) //最后执行fn函数
}
}
其它几个辅助函数都差不多，就是传给normalizeNamespace的函数内实现略有不同。
vuex 源码分析(六) 辅助函数 详解的更多相关文章
- vuex 源码分析(五) action 详解
action类似于mutation,不同的是Action提交的是mutation,而不是直接变更状态,而且action里可以包含任意异步操作,每个mutation的参数1是一个对象,可以包含如下六个属 ...
- 【集合框架】JDK1.8源码分析之ArrayList详解(一)
[集合框架]JDK1.8源码分析之ArrayList详解(一) 一. 从ArrayList字表面推测 ArrayList类的命名是由Array和List单词组合而成,Array的中文意思是数组,Lis ...
- nginx源码分析线程池详解
nginx源码分析线程池详解 一.前言 nginx是采用多进程模型,master和worker之间主要通过pipe管道的方式进行通信,多进程的优势就在于各个进程互不影响.但是经常会有人问道,n ...
- vuex 源码解析(四) mutation 详解
mutation是更改Vuex的store中的状态的唯一方法,mutation类似于事件注册,每个mutation都可以带两个参数,如下: state ;当前命名空间对应的state payload ...
- Golang源码分析之目录详解
开源项目「go home」聚焦Go语言技术栈与面试题,以协助Gopher登上更大的舞台,欢迎go home~ 导读 学习Go语言源码的第一步就是了解先了解它的目录结构,你对它的源码目录了解多少呢? 目 ...
- Tomcat源码分析 | 一文详解生命周期机制Lifecycle
目录 什么是Lifecycle? Lifecycle方法 LifecycleBase 增加.删除和获取监听器 init() start() stop() destroy() 模板方法 总结 前言 To ...
- Java 容器源码分析之集合类详解
集合类说明及区别 Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashtable ├HashMap └W ...
- Cloudera Impala源码分析: SimpleScheduler调度策略详解包括作用、接口及实现等
问题导读:1.Scheduler任务中Distributed Plan.Scan Range是什么?2.Scheduler基本接口有哪些?3.QuerySchedule这个类如何理解?4.Simple ...
- VueX源码分析（5）
VueX源码分析(5) 最终也是最重要的store.js,该文件主要涉及的内容如下: Store类 genericSubscribe函数 resetStore函数 resetStoreVM函数 ins ...
随机推荐
- JS字符串替换,将一个字符串中的特定字符串换成其他字符串
- STN(Spatial Transformer Networks)
url: https://arxiv.org/abs/1506.02025 year:2015 blog: https://kevinzakka.github.io/2017/01/10/stn-pa ...
- RAID 2.0 技术（块虚拟化技术）
RAID 2.0 技术(块虚拟化技术) RAID 2.0 技术(块虚拟化技术),该技术将物理的存储空间划分为若干小粒度数据块,这些小粒度的数据块均匀的分布在存储池中所有的硬盘上,然后这些小粒度的数据块 ...
- Java 生态圈知识汇总
原文地址:github.com/aalansehaiy… 前言 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.其实不然,笔者虽是计算机专业出身,但工作年限并不长,对于技术这碗饭有一些 ...
- 深入理解Java中的Garbage Collection
前提 最近由于系统业务量比较大,从生产的GC日志(结合Pinpoint)来看,需要对部分系统进行GC调优.但是鉴于以往不是专门做这一块,但是一直都有零散的积累,这里做一个相对全面的总结.本文只针对Ho ...
- java基础(10):继承、抽象类
1. 继承 1.1 继承的概念 在现实生活中,继承一般指的是子女继承父辈的财产.在程序中,继承描述的是事物之间的所属关系,通过继承可以使多种事物之间形成一种关系体系.例如公司中的研发部员工和维护部员工 ...
- paypal开发指南
一.开发者地址: https://developer.paypal.com 使用在paypal上注册的账号登陆即可, 二.沙箱账号 paypay自动会为你创建两个沙箱账号,一个商家,一个买家.在acc ...
- 前端开发JS——jQuery常用方法
jQuery基础(三)- 事件篇 1.jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作,这两个方法用法及其类似,所以 ...
- 解决mac睡眠唤醒/插拔之后，外接显示器无法点亮/无信号问题
问题现象 mac盖上盖子唤醒或者里临时拔出数据线,再重新连接之后,经常出现下面问题: [系统偏好设置]-[显示器]仍可以识别外接显示器: 外接显示器会提示无信号输入 解决方法 方法一 通过[系统偏好设 ...
- js 时间戳转化为时间
// 时间戳转为时间 bb="xxxx"://时间戳 var date = new Date(bb); Y = date.getFullYear() + '-'; M = (dat ...