vuex中组合action的使用

2,867 阅读1分钟

组合多个action,处理更加复杂的异步流程。

业务逻辑场景:存在2个action,actionA和actionB,先执行完actionA才能执行actionB。

actions:{
    actionA({commit}){
        return new Promise((reslove,reject)=>{
            commit('someMutationA')
            reslove()
        })
    }
}

第一种,在组件里派发action

this.$store.dispatch('actionA').then(()=>{
    // ...派发其他的action或者写其他的逻辑
})

第二种,在actions里派发另一个action

actions:{
    actionB({dispatch, commit}){
        return dispatch('actionA').then(()=>{
            commit('someOtherMutation')
        })
    }
}

第三种,使用async/await的写法

actions:{
    async actionA({commit}){
        commit('someMutationA', await someMutationA())
    },
    async actionB({dispatch,commit}){
        await dispatch('actionA') // 等待actionA完成
        commit('someMutationB', await someMutationB)
    }
}

问题:入职新公司,看他们的项目中使用了大量的复杂action,大概有几百个,但是都没有commit方法,仅仅只是使用这个架构。每一个action处理之前都派发了另一个发送请求和路由拦截的action。看懵了,不知道他们以前为什么这么写。感觉是把API的东西放在了store文件夹下的action里面。