generally I like to keep most of the logic behind vuex actions inside my modules, this way I keep components clean and most of the logic gathered in modules (this seems optimal form me), the issue is sometimes I'll need to do some action inside component data after the action (generally invlving an axios promise) finishes(like for example, clearing a form after a successfull ajax call), I thought I solved this by adding a then closure to my vuex action call and returning axios promise in my module but I noticed that the then closure will always resolve inmediatelly instead of only when everything goes right, 200 OK.
Here is my component :
stripeSourceHandler: function(sourceId)
{
if(this.customerSources.length == 0)
{
console.log('createSourceAndCustomer');
this.createSourceAndCustomer({ id: sourceId, paymentCity:this.paymentCity, paymentAddress:this.paymentAddress })
.then(() => {
this.clearForm();
});
}
}
My vuex module action:
createSourceAndCustomer({ commit }, sourceData)
{
commit('Loader/SET_LOADER', { status:1, message: 'Añadiendo forma de pago...' }, { root: true });
return axios.post('/stripe/create-source-and-customer', sourceData)
.then((response) => {
commit('Loader/SET_LOADER', { status:2, message: response.data.message }, { root: true });
commit('CREATE_SOURCE_AND_CUSTOMER', response.data.customer);
},
(error) => {
commit('Loader/SET_LOADER', { status:3, errors: error, message: 'Oops, algo salio mal..' }, { root: true });
});
},
So to summarize, I want the clearForm method to happen only if the axios call was successful instead of always firing.