I am currently utilizing Laravel 5.7 in combination with Vue2 and Vuex.
While working on my project, I have encountered an issue where Vue is not returning a store value after the dispatch call completes. The workflow of my application is as follows:
- When I click a submit button, it triggers the validate() function within the component.
- The validate() function then dispatches to the "addLease" action, which interacts with the store API in a Laravel controller.
- Laravel handles data validation and responds with either errors or a success message.
- Upon receiving the response, the leaseStore state is updated accordingly through a commit operation.
My challenge lies in submitting a blank form, resulting in errors being returned – evident in the Network tab of Chrome DEV tools. Everything appears to be functioning correctly until the error needs to be stored in the leaseStore state. An error displayed in the console reads:
Uncaught (in promise) TypeError: Cannot read property 'leaseStore' of undefined
I suspect there may be a small oversight on my part, but pinpointing the mistake has proven difficult. It seems that there might be an issue when committing the error value to the leaseStore state, though I can't be certain.
API Call:
postLeaseStore: function(data){
return axios.post('/api/lease',
data
);
}
Action:
addLease({ commit, state }, data) {
commit('setLeaseStore', 0);
LeaseAPI.postLeaseStore(data)
.then( function( response ) {
console.log('Success');
commit('setLeaseStore', 1);
})
.catch( function(error) {
console.log('Error');
return commit('setLeaseStore', 3);
});
}
Vue Component:
computed: {
leaseStore() {
return this.$store.getters.getLeaseStore;
}
},
methods: {
validate()
{
this.$store.dispatch('addLease', this.input).then(function () {
console.log(this.leaseStore);
});
}
}