action mutation 调用_Vuex源码学习(七)action和mutation如何被调用的(调用篇)
前置篇不会那可不行!Vuex源码学习(六)action和mutation如何被调用的(前置准备篇)
在前置准备篇我们已经知道被处理好的action与mutation都被集中放置在哪里了。下面就要看dispacth和commit如何去调用它们。
dispatch与commit的实现
commit:
首先呢我们要校正参数,把传入的参数整理下
主要是处理这种形式
// 接收一个对象
this.$store.commit({type : 'setName',name : 'xLemon'});
this.$store.commit('setName',{name : 'xLemon'});
这两个基本等价。
只是第一种方式mutation接收的payload会比第二种多一个type属性,
整理的部分并不关键
type是我们要找的mutation的名字,如何找到mutation呢?
通过 this._mutations[type] 找到要执行的mutation
所以type一定要是mutation的全名
所以我们通过commit找mutation的时候有命名空间的时候就要输入全名,(那种带很多/的)。没有这个名字的mutation容错处理,然后在withCommit函数的包裹下,完成了mutation的执行(所有mutation啊,全名相同的mutation都会被执行)。然后呢遍历_subscribers里面的函数进行执行。
_subscribers这是什么?在一开始我们可以注册一些内容(函数),在commit完成时被通知执行。(观察者模式)如何注册在这一章就不多讲了!后面章节会统一讲述。
这就是commit做的事情。
dispatch呢?
与commit大同小异,
也有一个_actionSubscribers的属性,在dispatch执行之前全部调用。
对于dispatch Vuex推荐的是放置异步任务,在注册action的时候已经被强制promise化了,所以有多个同名action会通过Promise.all来处理。在action的前后都有对应的钩子函数执行。
固定disptach与commit的this指向
//在vue组件内一个方法如果多次使用dispatch和commit,就会很麻烦。
this.$store.dispatch('xxx',payload);
this.$store.commit('xxx',payload);
const {dispatch,commit} = this.$store;
//这相当于创建变量,然后把this.$store的dispatch与commit赋值给它们。
//有经验的都应该知道,函数dispatch和commit的this指向在严格模式下指向undefined。
// 非严格模式下指向window,
// 刚才的源码中我们也看到了,dispatch和commit都依赖于Store实例。怎么办??
解决方法如下:
dispatch和commit是Store原型链上的方法,在constructor内注册了构造函数内的方法,把原型上的dispatch和commit进行了一个this指向的强制绑定,通过call让两个方法永远指向Store的实例上,保证了dispatch和commit不会因为赋值给其余变量等操作导致this指向改变从而发生问题
action与mutation函数的参数都有哪些?怎么来的?
看一个简单的mutation:
export const setName = function(state,payload) {
state.name = payload;
};
这个时候不经意间有了一个疑惑?state哪里来的。
这就要从mutation被注册的函数内找原因了
handle是我们要被注册的一个mutation,entry是这个同名mutation的容器(存储所有的这个名字的mutation,一般只有一个)在吧handle放入entry的过程中,
我们发现,entry是被一个函数包裹起来,然后将local.store和payload绑定到这个handle的参数上,然后把handle的this指向锁定到了Store实例上,所以mutation在被commit调用的时候只传入了一个参数payload,
但是mutation函数执行的时候就有了两个参数。
下面看一下action:
按照刚才的分析action在被dispatch调用的时候会接收一个参数,但是action执行的时候会接收两个参数,第一个参数是个对象里面有六项,真的是包罗万象啊。。。我们看一下这个对象的六项
{
dispatch : local.dispatch,
commit:local.commit,
getter: local.getters,
state: local.state,
rootGetters:store.getters,
rootState:store.state
}
分为两种一种是local的、一种是store的。mutation中好像也有使用local,那么local的意义是什么呢?我们下一节会讲述local的含义以及makeLocalContext、makeLocalGetters两个函数的作用。
还是要给个小线索,在模块树的层级很高的时候,我们在使用state的时候要一层一层找寻吗?
总结
dispatch与commit在执行的时候,都是根据传入的全名action、mutation去Store实例的_actions、_mutations中找到对应的方法,进行执行的。
dispatch和commit中都使用了this(指向Store实例),为了防止this的指向改变从而出现问题,就把原型上的dispatch与commit在constructor中处理到了实例本身,这个过程做了this指向的绑定(call)。
action和mutation在执行的时候,参数都是在注册的时候就绑定了一部分,所以action与mutation在使用的时候可以访问到state等很多内容。
下一章;离开action与mutation 来讨论一下local的含义以及makeLocalContext、makeLocalGetters两个函数的作用
我是一个应届生,最近和朋友们维护了一个公众号,内容是我们在从应届生过渡到开发这一路所踩过的坑,已经我们一步步学习的记录,如果感兴趣的朋友可以关注一下,一同加油~
action mutation 调用_Vuex源码学习(七)action和mutation如何被调用的(调用篇)相关推荐
- mutations vuex 调用_Vuex源码学习(六)action和mutation如何被调用的(前置准备篇)...
前言 Vuex源码系列不知不觉已经到了第六篇.前置的五篇分别如下: 长篇连载:Vuex源码学习(一)功能梳理 长篇连载:Vuex源码学习(二)脉络梳理 作为一个Web前端,你知道Vuex的instal ...
- action mutation 调用_Vuex源码学习(六)action和mutation如何被调用的(前置准备篇)...
module与moduleCollection你一定要会啊!Vuex源码学习(五)加工后的module 在组件中使用vuex的dispatch和commit的时候,我们只要把action.mutati ...
- mutations vuex 调用_Vuex源码解析
" 为方便理解,本文中提及的store为Store的实例,promise为Promise的实例 源码的大致实现流程如下图: 在正式阅读Vuex源码之前,我们先实现一个简易版的Vuex来帮助我 ...
- 【spring源码学习】spring的aop目标对象中进行自我调用,且需要实施相应的事务定义的解决方案...
转载:http://www.iteye.com/topic/1122740 1.预备知识 aop概念请参考[http://www.iteye.com/topic/1122401]和[http://ji ...
- Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流(五)
在上一篇笔记中:Vuex 4源码学习笔记 - Store 构造函数都干了什么(四) 我们通过查看Store 构造函数的源代码可以看到主要做了三件事情: 初始化一些内部变量以外 执行installMod ...
- Vuex源码学习(五)加工后的module
没有看过moduleCollection那可不行!Vuex源码学习(四)module与moduleCollection 感谢提出代码块和截图建议的小伙伴 代码块和截图的区别: 代码块部分希望大家按照我 ...
- Vuex 4源码学习笔记 - Vuex是怎么与Vue结合?(三)
在上一篇笔记中:Vuex源码学习笔记 - Vuex开发运行流程(二) 我们通过运行npm run dev命令来启动webpack,来开发Vuex,并在Vuex的createStore函数中添加了第一个 ...
- ASP.NET Core 源码学习之 Logging[2]:Configure
在上一章中,我们对 ASP.NET Logging 系统做了一个整体的介绍,而在本章中则开始从最基本的配置开始,逐步深入到源码当中去. 默认配置 在 ASP.NET Core 2.0 中,对默认配置做 ...
- ASP.NET Core 源码学习之Logging[1]:Introduction
在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...
- ASP.NET Core 源码学习之 Options[4]:IOptionsMonitor
前面我们讲到 IOptions 和 IOptionsSnapshot,他们两个最大的区别便是前者注册的是单例模式,后者注册的是 Scope 模式.而 IOptionsMonitor 则要求配置源必须是 ...
最新文章
- 激光雷达与汽车技术路线
- 工业组态领头羊--组态王开始涉足.net程序开发(与林伟先生一次近距离接触)...
- python画直方图代码-python plotly画柱状图代码实例
- 中国还有一个作家叫格非
- Vue-cli3配置教程入门
- 武大金融工程和计算机专业,求解!武大的金融工程可以排第几
- 一种大豆多种病害自动识别的新方法
- oracle一个表拆成多个表,oracle拆分函数,将字符串拆分成多行多字段表数据
- iOS web 、原生 js 交互:方法及原理
- java 绘制点阵_[Java基础知识]点阵字库在JAVA中的实现
- bootstrap制作一个优美的导航栏
- 如何使用计算机还原魔方?
- VeryCD新建2组中国eMule服务器
- Python复制单个文件为多个脚本
- 部件mscomctl_mscomctl.ocx下载_mscomctl.ocx官方下载【32位64位】-太平洋下载中心
- HarmonyOS上玩“语音识别”
- 钉钉勋章在哪看?钉钉勋章查看方法
- 树莓派之老的方式重刷Raspbian系统-2015
- 【CSS面试题】—CSS实现三角形
- 单片机 蓝牙/WIFI无线遥控智能家居系统设计