Currently, I am working on making API calls from within a Vuex store action object. Here's an example of one of my actions:
/**
* Check an account activation token
*
*/
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
Api.checkActivationToken(payload.token).then((response) => {
if (response.fails()) {
return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
}
return commit('SET_TOKEN')
})
}I have multiple methods like this for different actions. What I want to do is display a loader while each API call is in progress and hide it once the response is received. One way to achieve this is by including the loader logic in each action like this:
/**
* Check an account activation token
*
*/
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
commit('SHOW_LOADER')
Api.checkActivationToken(payload.token).then((response) => {
commit('HIDE_LOADER')
if (response.fails()) {
return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
}
return commit('SET_TOKEN')
})
}However, having to add these SHOW_LOADER/HIDE_LOADER commits in every API call is repetitive. I would prefer to centralize this functionality so that the loader handling is automatically applied to all API calls without the need for additional lines in each action.
The API I am using is a client layer built on top of Axios. I tried importing the store into the client layer or where the Axios events are triggered to handle the loader visibility centrally, but encountered a circular reference issue because of how the client layer is instantiated within the vuex module.
Is there a way to achieve what I'm aiming for through hooks or events that I may not be aware of?