VueJS - VueX : displaying notification after async process - vue.js

Question

Extract of my Single File Component:
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
data () {
return {
firstname: this.$store.getters.user.firstName,
lastname: this.$store.getters.user.lastName,
}
},
methods: {
...mapActions([
'updateUserProfile'
]),
// Function called when user click on the "Save changes" btn
onSubmit () {
console.log('Component(Profile)::onSaveChanges() - called');
const userData = {
firstName: this.firstname,
lastName: this.lastname
}
this.updateUserProfile(userData);
}
}
}
</script>
In my VueX store:
I already manage a LOADING state which is used to display a loading spinner.
Now, i would like to display a notification widget programmatically by using toastr library: toastr.success("Your profile has been updated");
Where should I place this code ? I suppose that is not a good practice to put this code directly on the updateUserProfile function of the store, but more on the Single File Component where the call is made ?
/*
* Action used to fetch user data from backend
*/
updateUserProfile ({commit, state}, userData) {
if (!state.jwtToken) {
return
}
// Inform VueX that we are currently loading something. Loading spinner will be displayed.
commit('SET_IS_LOADING', true);
axiosBackend.put('/user/profile', userData, { headers: { Authorization: state.authString } } ).then(res => {
console.log('PUT /user/profile', res);
// Store user data in local storage
localStorage.setItem('user', JSON.stringify(res.data.data));
// Set user Data in VueX Auth store
commit('SET_USER_DATA', {
user: res.data.data
});
// Reset is Loading
commit('SET_IS_LOADING', false);
})
.catch(error => {
// Reset isLoading
commit('SET_IS_LOADING', false);
});
}

Answer 1

You can return a Promise from action
updateUserProfile ({commit, state}, userData) {
if (!state.jwtToken) {
return
}
// Inform VueX that we are currently loading something. Loading spinner will be displayed.
commit('SET_IS_LOADING', true);
return axiosBackend.put('/user/profile', userData, { headers: { Authorization: state.authString } } ).then(res => {
console.log('PUT /user/profile', res);
// Store user data in local storage
localStorage.setItem('user', JSON.stringify(res.data.data));
// Set user Data in VueX Auth store
commit('SET_USER_DATA', {
user: res.data.data
});
// Reset is Loading
commit('SET_IS_LOADING', false);
return res.data.data
})
.catch(error => {
// Reset isLoading
commit('SET_IS_LOADING', false);
throw error
});
}
and then in Vue component:
onSubmit () {
console.log('Component(Profile)::onSaveChanges() - called');
const userData = {
firstName: this.firstname,
lastName: this.lastname
}
this.updateUserProfile(userData)
.then(data => {
toastr.success("Your profile has been updated");
})
.catch(error => {
console.error(error)
})
}

Answer 2

You should probably return the promise from your action:
/*
* Action used to fetch user data from backend
*/
updateUserProfile ({commit, state}, userData) {
if (!state.jwtToken) {
throw new Error('unauthenticated')
}
// Inform VueX that we are currently loading something. Loading spinner will be displayed.
commit('SET_IS_LOADING', true);
return axiosBackend.put('/user/profile', userData, { headers: { Authorization: state.authString } } ).then(res => {
console.log('PUT /user/profile', res);
// Store user data in local storage
localStorage.setItem('user', JSON.stringify(res.data.data));
// Set user Data in VueX Auth store
commit('SET_USER_DATA', {
user: res.data.data
});
// Reset is Loading
commit('SET_IS_LOADING', false);
return res.data.data
})
.catch(error => {
// Reset isLoading
commit('SET_IS_LOADING', false);
throw error
});
}
And then use this promise in your component:
onSubmit () {
console.log('Component(Profile)::onSaveChanges() - called');
const userData = {
firstName: this.firstname,
lastName: this.lastname
}
this.updateUserProfile(userData).then(user => {
toastr.success("Your profile has been updated")
}).catch(error => {
toastr.error("Something bad happened")
})
}