详解vuex中action何时完成以及如何正确调用dispatch的思考


Posted in Javascript onJanuary 21, 2019

在项目中遇到关于action与dispatch使用的一些细节问题,经过搜索得到了一些答案。

特意在此提出,如有错误还请指出,十分感谢~

问题1:如果action是异步的,那么怎么知道它什么时候完成?在vuex的官网给出了答案:

详解vuex中action何时完成以及如何正确调用dispatch的思考

注:如果需要通过组合多个action来完成某些逻辑,用async/await会更简单一点

问题2: 如果action是同步的,就不需要等待它完成了吗?

其实这个问题相当于在w:dispatch('some action')是一个同步函数还是异步函数。

如果dispatch是一个异步函数(返回一个promise),那么即使action里面的逻辑是同步的,如果需要等待这个action完成之后才进行某些操作,仍然是需要用异步等待dispatch().then(()=> {})来实现

通过查看vuex的源码找到了答案:

dispatch (_type, _payload) {
  // check object-style dispatch
  const {
   type,
   payload
  } = unifyObjectStyle(_type, _payload)

  const action = { type, payload }
  const entry = this._actions[type]
  if (!entry) {
   if (process.env.NODE_ENV !== 'production') {
    console.error(`[vuex] unknown action type: ${type}`)
   }
   return
  }

  try {
   this._actionSubscribers
    .filter(sub => sub.before)
    .forEach(sub => sub.before(action, this.state))
  } catch (e) {
   if (process.env.NODE_ENV !== 'production') {
    console.warn(`[vuex] error in before action subscribers: `)
    console.error(e)
   }
  }

  const result = entry.length > 1
   ? Promise.all(entry.map(handler => handler(payload)))
   : entry[0](payload)

  return result.then(res => {
   try {
    this._actionSubscribers
     .filter(sub => sub.after)
     .forEach(sub => sub.after(action, this.state))
   } catch (e) {
    if (process.env.NODE_ENV !== 'production') {
     console.warn(`[vuex] error in after action subscribers: `)
     console.error(e)
    }
   }
   return res
  })
 }

dispatch函数返回的是一个promise,所以dispatch后如果需要跟进操作(比如dispatch里面commit了一个state,后续要用到这个state),正确的做法应该是需要用异步的方式来完成后续的逻辑

注:用同步的写法看起来好像state也是对的,但可能只是恰好我的业务场景io使用不是很高所以"看起来是对的",严谨的做法应该还是需要用异步来完成后续操作的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
js进行表单验证实例分析
Feb 10 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
VSCode搭建React Native环境
May 07 Javascript
JavaScript常用事件介绍
Jan 21 #Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 #Javascript
JavaScript闭包与作用域链实例分析
Jan 21 #Javascript
js中事件对象和事件委托的介绍
Jan 21 #Javascript
JavaScript作用域链实例详解
Jan 21 #Javascript
Jquery的Ajax技术使用方法
Jan 21 #jQuery
js变量声明var使用与不使用的区别详解
Jan 21 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
深入php self与$this的详解
2013/06/08 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python实现将内容分行输出
2015/11/05 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python使用Matplotlib画饼图
2018/09/25 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
造型师求职自荐信
2013/09/27 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
绿色出行口号
2014/06/18 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
横店影视城导游词
2015/02/06 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
中学政教处工作总结
2015/08/13 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers