详解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之小练习代码
Oct 12 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
巧用数组制作图片切换js代码
2016/11/29 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python 专题四 文件基础知识
2017/03/20 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python logging添加filter教程
2019/12/24 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书