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

在项目中遇到关于action与dispatch使用的一些细节问题,经过搜索得到了一些答案。
特意在此提出,如有错误还请指出,十分感谢~

问题1:如果action是异步的,那么怎么知道它什么时候完成?

  • 在vuex的官网给出了通用方法:
  • vuex中action何时完成以及如何正确调用dispatch的思考
  • (1) dispatch一个异步action通常接一个then()来跟进后续的逻辑
  • (2) 如果业务是有时序的多个action的异步组合,用async/await的写法会更直观一点

问题2: 如果action是同步的,是否还需要使用then来接dispatch的后续操作?

提出这个疑问主要是因为以前一直认为只要dispatch的action是同步的(仅仅commit了一个state),就可以当做是同步的函数进行使用
但在看到vuex的源码的dispatch实现的代码就知道其实dispatch其实是一个异步函数

dispatch (_type, _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,所以它是一个异步函数,所以即使action里面的逻辑是同步的,如果dispatch之后需要接着用到commit的state变量,仍然需要使用异步写法(dispatch().then(()=> {}))来实现。

  • 注:用同步的写法看起来好像state也是对的,但我认为是因为我的业务场景io使用率不是很高所以"看起来是对的",在高io的场景下state可能会因为延时而没有及时更新

如有错误,请不吝提出,谢谢!

相关推荐