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 ...
随机推荐
- JMS入门Demo
2.1点对点模式(邮箱) 点对点的模式主要建立在一个队列上面,当连接一个列队的时候,发送端不需要知道接收端是否正在接收,可以直接向ActiveMQ发送消息,发送的消息,将会先进入队列中,如果有接收端在 ...
- poj-3682 King Arthur's Birthday Celebration
C - King Arthur's Birthday Celebration POJ - 3682 King Arthur is an narcissist who intends to spare ...
- ansible小结（八）ansible-playbook简单使用
ansbile-playbook是一系统ansible命令的集合,其利用yaml 语言编写,运行过程,ansbile-playbook命令根据自上而下的顺序依次执行.同时,playbook开创了很多特 ...
- [debug]ubuntu共享文件夹所在目录
使用Vmware虚拟机,Vmware Tools工具的复制粘贴一直无效,之后采用共享文件夹. 其默认的是在 \mnt\hgfs 下,在Vmware的设置中建立好文件夹,将文件传入进去,之后就可以去 \ ...
- 分析一个简单的WPF程序
1.新建WPF项目 使用Visual Studio 代码编辑器点击新建项目,选择 WPF应用后点击下一步: 在新窗口中我们填写项目名称.选择项目位置后点击创建就完成了WPF项目的创建. 2.WPF项目 ...
- matlab C程序
通过把耗时长的函数用c语言实现,并编译成mex函数可以加快执行速度 Matlab本身是不带c语言的编译器的,所以要求你的机器上已经安装有VC,BC或Watcom C中的一种 注:在Matlab里,矩阵 ...
- PHP配置篇（一）--php开启redis扩展
因为最近要用到Redis,下面记录下如何给PHP开启redis的扩展. 一.安装redis 1.安装redis:https://github.com/MSOpenTech/redis/releases ...
- [PHP] PHP PDO与mysql的连接单例防止超时情况处理
这个数据库类主要处理了单例模式下创建数据库对象时,如果有两次较长时间的间隔去执行sql操作,再次处理会出现连接失败的问题,利用一个cache数组存放pdo对象与时间戳,把两次执行之间的时间进行了比较, ...
- [Linux] docker 方式安装和使用gitlab-ce
gitlab就相当于我们自己内网搭建的git服务,相当于公司内的github. 拉取镜像docker pull gitlab/gitlab-ce 创建宿主机的数据目录mkdir -p /mnt/git ...
- [视频教程]利用SSH隧道进行远程腾讯云服务器项目xdebug调试
我的远程服务器是腾讯云的ubuntu系统机器,本地我的电脑系统是deepin的系统,使用的IDE是vscode.现在就来使用本地的IDE来调试腾讯云中为网站项目实现逻辑是访问网站域名后,请求被转发给腾 ...