vue组合Aciton

作者: Funwt | 来源:发表于2018-07-11 11:48 被阅读10次

    Action通常是异步的,那么如何知道action什么时候结束呢?更重要的是,我们是如何才能组合多个action,以处理更加复杂的异步流程呢?
    首先,store.dispatch可以处理被触发的action的处理函数返回的Promise,并且store.dispatch仍旧返回Promise:

    actions: {
      actionA ({commit}) {
        return new Promise((resolve,reject) => {
          setTimeout(() => {
            commit('someMutation')
            resolve()
          }, 1000)
        })
      }
    }
    

    现在你可以

    store.disptch('actionA').then(() => {
      //...
    })
    
    actions: {
      // ...
      actionB ({ dispatch, commit }) {
        return dispatch('actionA').then(() => {
          commit('someOtherMutation')
        })
      }
    }
    
    //利用async/await, 假设 getData() 和 getOtherData() 返回的是 Promise
    actions: {
      async actionA ({ commit }) {
        commit('gotData', await getData())
      },
      async actionB ({ dispatch, commit }) {
        await dispatch('actionA') // 等待 actionA 完成
        commit('gotOtherData', await getOtherData())
      }
    }
    

    一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。

    相关文章

      网友评论

        本文标题:vue组合Aciton

        本文链接:https://www.haomeiwen.com/subject/zhqhpftx.html