vuex 源码分析(五) action 详解
action类似于mutation，不同的是Action提交的是mutation，而不是直接变更状态，而且action里可以包含任意异步操作，每个mutation的参数1是一个对象，可以包含如下六个属性:
commit ;当前命名空间对应的commit
dispatch ;当前命名空间对应的dispatch
state ;当前命名空间对应的state
getters ;当前命名空间对应的getters
rootState ;根模块的state
rootGetters ;根模块的getters
类似于mutation,创建Vuex.Store()仓库实例时可以通过actions创建每个action
我们也不能直接调用一个action,而是通过 store.dispatch来调用,dispatch可以带两个参数，如下:
type ;对应的action名
payload ;传入的参数
dispatch还有一种写法，就是传入一个对象即可，该对象可以带一个type参数，type指定为action的名称，整个对象会作为参数传递给action。注意:action里可以包含异步操作
例如:
<!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>
<button @click="test">测试</button>
</div>
<script>
const store = new Vuex.Store({
state:{no:100},
mutations:{
increment(state,payload){state.no+=payload.no;}
},
actions:{
increment({commit},info){
return new Promise(function(resolve,reject){ //action里返回一个Promise对象
setTimeout(function(){
commit('increment',info)
resolve('ok')
},500)
})
}
}
}) var app = new Vue({
el:"#app",
store,
computed:{
no(){return this.$store.state.no}
},
methods:{
test(){
this.$store.dispatch('increment',{no:100})
}
}
})
</script>
</body>
</html>
我们在action里不返回一个promise对象也可以，vuex内部会调用Promise.resolve自动将返回值转换为一个Promise对象
源码分析
writer by:大沙漠 QQ:22969969
在创建Vuex.Store()初始化时会执行installModule()安装根模块，和mutation相关的如下:
function installModule (store, rootState, path, module, hot) { //安装模块
/*略*/
module.forEachAction(function (action, key) { //遍历module模块的action对象，如果找到了，则执行这个匿名函数 参数1:每个action值 key:对应的键名
var type = action.root ? key : namespace + key; //对应的命名空间+key
var handler = action.handler || action; //获取对应的函数
registerAction(store, type, handler, local); //调用registerAction注册action
});
/*略*/
}
registerAction是用于注册action的，如下:
function registerAction (store, type, handler, local) { //注册action函数 store:Store实例 type:包含命名空间的action名 handler:函数 local:上下文相关的对象
var entry = store._actions[type] || (store._actions[type] = []); //如果store对象的_actions对应的type为空，则初始化为空数组
entry.push(function wrappedActionHandler (payload, cb) { //给store._actions push 进去一个匿名函数
var res = handler.call(store, { //该函数
dispatch: local.dispatch,
commit: local.commit,
getters: local.getters,
state: local.state,
rootGetters: store.getters,
rootState: store.state
}, payload, cb); //执行handler函数,上下文为store,参数1是个对象，参数2是payload数据，将返回值保存到res中
if (!isPromise(res)) { //如果res不是一个Promise
res = Promise.resolve(res); //则将它转换为Promise对象
}
if (store._devtoolHook) {
return res.catch(function (err) {
store._devtoolHook.emit('vuex:error', err);
throw err
})
} else {
return res
}
});
}
从这里我们可以看到每个action对应的参数1，就是这里执行的handler函数，传入的对象，返回值如果不是Promise对象，则调用Promise.resolve()将它转换为Promise对象
等我们去调用this.$store.dispatch('increment',{no:100})触发一个action时，首先会触发Store函数内重定义的dispatch，它会以当前Store函数对象为上下文继续执行Store原型上的dispatch函数，如下:
Store.prototype.dispatch = function dispatch (_type, _payload) { //派发一个action异步操作
var this$1 = this;
// check object-style dispatch
var ref = unifyObjectStyle(_type, _payload); //规范一下参数，返回一个对象，这里和commit调用的是一样的
var type = ref.type;
var payload = ref.payload;
var action = { type: type, payload: payload };
var entry = this._actions[type]; //尝试获取type类型的action
if (!entry) { //如果不存在则报错并返回
{
console.error(("[vuex] unknown action type: " + type));
}
return
}
try {
this._actionSubscribers
.filter(function (sub) { return sub.before; })
.forEach(function (sub) { return sub.before(action, this$1.state); });
} catch (e) {
{
console.warn("[vuex] error in before action subscribers: ");
console.error(e);
}
}
var result = entry.length > 1
? Promise.all(entry.map(function (handler) { return handler(payload); }))
: entry[0](payload); //执行该action，如果大于1则用Promise.all()
return result.then(function (res) {
try {
this$1._actionSubscribers
.filter(function (sub) { return sub.after; })
.forEach(function (sub) { return sub.after(action, this$1.state); });
} catch (e) {
{
console.warn("[vuex] error in after action subscribers: ");
console.error(e);
}
}
return res
})
};
最后返回的还是一个res，也就是Promise对象，这样就实现了异步操作了。
vuex 源码分析(五) action 详解的更多相关文章
- vuex 源码分析(六) 辅助函数 详解
对于state.getter.mutation.action来说,如果每次使用的时候都用this.$store.state.this.$store.getter等引用,会比较麻烦,代码也重复和冗余,我 ...
- 【集合框架】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 ...
随机推荐
- MYSQL 高级语法
1.高级建表和插入 使用creat 和select 进行建表操作,中间采用AS 标识符: CREATE TABLE new_table AS SELECT * FROM exist_table LIM ...
- 转Ubuntu 16.04 创建无线热点
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ac_dao_di/article/deta ...
- Zabbix 数据清理
目录 Zabbix 数据清理的一系列操作 一.问题 二.解决办法 Zabbix 数据清理的一系列操作 基本信息: Zabbix 版本 4.0.9 MySQL 版本 5.5 一.问题 我们将 Zabbi ...
- Python爬取知乎单个问题下的回答
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 努力学习的渣渣哦 PS:如有需要Python学习资料的小伙伴可以加 ...
- 关于spring,IOC和AOP的解析原理和举例
引用自:https://blog.csdn.net/paincupid/article/details/43152397 IOC:就是DAO接口的实现不再是业务逻辑层调用工厂类去获取,而是通过容器(比 ...
- 安卓开发笔记（三十二）:banner轮播图的实现
一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...
- 微信小程序踩坑日记3——上传照片至服务器
0. 引言 主要解决将小程序端获取的图片保存在服务器上.亲测可用的服务端脚本. 1. 获取照片 通过wx.chooseImage()方法,获取到图片,使用wx.uploadFile()上传图片. wx ...
- Linux中vim编辑命令
vim 功能 : 一个强大的文本编辑器 语法格式 :vim [ 选项 ] / 路径 / 文本文件名 命令格式: vi [ 选项 ] [ 文件名 ] +num 打开某个文件直接跳转到 num 行 ...
- mysql 之优化
# ### part1 : sql语句优化 # (1) mysql 执行流程 客户端: 发送链接请求,然后发送sql语句 服务端: 1.连接层: 提供和客户端链接的服务 show processlis ...
- Centos7 环境安装初始化
安装系统 默认分区 磁盘分配(以20G为例): Boot分区:引导分区系统启动的必要核心文件,建议1G Var分区:存放log文件,不分则在/下,建议1G Home分区:存放用户数据,一般都比较大,建 ...