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 ...
随机推荐
- 解决上一篇bean.xml中<bean>标签报错“ Error while downloading 'http://www.springframework.org/schema/beans/spring-beans.xsd........”
在xml文件中,头部报错如题 一开始查询,说是头部少了“<?xml version="1.0" encoding="UTF-8"?>”,但是我并没有 ...
- pymongo和mongoengine安装和使用教程 包含常用命令行和代码示例 | pymongo and mongoengine tutorial on ubuntu 16.04
本文首发于个人博客https://kezunlin.me/post/e88f04e5/,欢迎阅读最新内容! pymongo and mongoengine tutorial on ubuntu 16. ...
- MySQL GROUP BY 的问题
拿 employee 示例数据库为例,当进行如下操作时会报错. mysql> SELECT * FROM employees GROUP BY gender; ERROR 1055 (42000 ...
- JVM内存分配策略，及垃圾回收算法
本人免费整理了Java高级资料,一共30G,需要自己领取;传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 说起垃圾收集(Garbage Co ...
- C++ 成员对象和封闭类
01 成员对象与封闭类 类里有其他对象则该对象叫成员对象:有成员对象的类叫 封闭类: class CTyre // 轮胎类 { public: // 有参数构造函数 // 初始化成员变量m_radiu ...
- 高强度学习训练第九天总结：5道剑指offer的题目
实在不想看JVM了.刷几道剑指Offer的题,今天就水一水吧,脑子迷糊. 1.二维数组中的查找 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增 ...
- Java数据结构（一）：栈
导言:栈和我们的现实当中的箱子是一样的,保持一个先进后出,后进先出的原则.比如我们往一个箱子堆积衣服,一件一件地放进去之后,过一段时间再回来拿.那么最先放进去的衣服肯定最后拿出来,最后放进去的衣服就会 ...
- hitTest和pointInside如何响应用户点击事件
hitTest和pointInside如何响应用户点击事件 处理机制 iOS事件处理,首先应该是找到能处理点击事件的视图,然后在找到的这个视图里处理这个点击事件. 处理原理如下: • 当用户点击屏幕时 ...
- MySQL基础之数据管理【3】
MySQL中的多表联查 --查询emp的id username age depName create table emp( id int unsigned auto_increment key, us ...
- 更改docker默认网段
#本文档旨在说明创建docker时注意的事项:我们在局域网中使用Docker,最常遇到的一个困惑,就是有时候跨网段结果出现网络不通.原因是因为Docker默认生成的网关和我们的局域网网段有时候是冲突的 ...