I'm currently experiencing an unusual problem. In my Vue project, I have a Vuex store that is divided into different modules. I am trying to utilize Promise.all() to simultaneously execute two independent async Vuex actions in order to benefit from the first fail behavior.
store/modules/categories:
async CATEGORIES({ rootState }) {
const response = await axios.post('link_to_api', {
// some arguments for the api
arg: rootState.args
})
return response
}
store/modules/transportation:
async TRANSPORTATION({ rootState }) {
const response = await axios.post('link_to_api', {
// some arguments for the api
arg: rootState.args
})
return response
}
Now, I want to invoke those async functions within Promise.all:
store/modules/categories:
async PUT_CATEGORIES({ commit, dispatch, rootState }) {
try {
const [resCategories, resTransportation] = await Promise.all([
dispatch('CATEGORIES').catch(err => { console.log('Error fetching categories!'); throw {error: err, origin: 'categories'}; }),
dispatch('transportation/TRANSPORTATION', {root:true}).catch(err => { console.log('Error fetching transportation!'); throw {error: err, origin: 'transportation'}; })
])
//do something after both promises resolved
} catch(error) {
// do something if one promise rejected
commit('errorlog/ERROR', 4, {root:true})
dispatch("errorlog/LOG_ERROR", {'origin': '2', 'error_code': '113', 'message': error.toString()}, {root:true})
router.push({path: '/Error'})
}
I encountered the following error:
https://i.stack.imgur.com/2ysmx.png
This is strange because I used {root:true} and the prefix transport in dispatch to access the action of the transport module in the store. This method works perfectly for the LOG_ERROR action in the errorlog module that I use in the catch block.
If I duplicate the TRANSPORTATION action in the categories module, it works fine...
Has anyone else encountered this issue before and can offer any advice??
Thank you in advance!