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

日期：2023-09-30 14:42

项目中遇到了一些关于action和dispatch使用的详细问题，搜索后得到了一些答案。

这里特别提到这一点。如有错误，请指出。非常感谢~

问题1：如果操作是异步的，您如何知道它何时完成？ vuex官网上给出了答案：

注意：如果需要组合多个action来完成某些逻辑，使用async/await会更简单

问题2：如果动作是同步的，是不是不需要等待它完成？

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

如果dispatch是一个异步函数（返回一个promise），那么即使action中的逻辑是同步的，如果需要等待action完成后再执行某些操作，仍然需要使用异步等待dispatch（ ).then( ()=> {}) 达到

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

 调度（_type，_payload）{
  // 检查对象风格的调度
  常量{
   类型，
   有效负载
  } = unifyObjectStyle(_type, _payload)

  const 操作 = { 类型，负载 }
  const 条目 = this._actions[类型]
  如果（！条目）{
   if (process.env.NODE_ENV !== '生产') {
    console.error(`[vuex] 未知操作类型：${type}`)
   }
   返回
  }

  尝试 {this._action订阅者
    .filter(sub => sub.before)
    .forEach(sub => sub.before(action, this.state))
  } 捕获 (e) {
   if (process.env.NODE_ENV !== '生产') {
    console.warn(`[vuex] 操作订阅者之前发生错误：`)
    控制台.错误(e)
   }
  }

  const 结果 = 条目.length > 1
   ？ Promise.all(www.introzo.com(handler => handler(payload)))
   ：条目[0]（有效负载）

  返回结果.then(res => {
   尝试 {
    this._action订阅者
     .filter(sub => sub.after)
     .forEach(sub => sub.after(action, this.state))
   } 捕获 (e) {
    if (process.env.NODE_ENV !== '生产') {
     console.warn(`[vuex] 操作订阅者中出现错误：`)
     控制台.错误(e)
    }
   }
   返回资源
  })
 }

dispatch函数返回的是一个promise，所以如果dispatch后需要进行后续操作（比如dispatch中提交了一个状态，后面会用到这个状态），正确的做法应该是使用异步的方法完成后续操作。逻辑

注：同步的写状态的方式看起来是正确的，但可能只是碰巧我的业务场景io使用率不是很高，所以“看起来是对的”。严谨的做法还是应该使用异步来完成后续的Operational

最近发表

猜你喜欢

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

相关文章