How to execute code after action finished in vue js? - vue.js

Question

How to execute code after action finished in vue js? this is my login action
login: async ({commit},loginDTO)=>{
return commit('login',loginDTO);
}
My login mutations is this:
login:(state, loginDTO)=>{
axios.post(loginEndpoint.login, loginDTO)
.then(resp => {
if(resp.data.statusCode == 1) {
state.user.userId = resp.data.userId;
state.user.response = resp.data.responseText;
localStorage.setItem("token", "token")
state.isLogin = true;
router.push({name: 'Systems'});
}
else{
alert(66);
state.user.response = resp.data.responseText;
}
})
.catch(err => {
})
}
And I call it from component like this:
methods:{
...mapActions(['login']),
async login1(){
const loginDTO = {
Username : this.user.Username,
Password: this.user.Password
};
await this.$store.dispatch('login',loginDTO);
this.$toastr.s("Message", "");
}
}
Now I need toast message but after action is completed.
Updated.

Answer 1

Make use of async-await, and await for async action to complete and sync mutation to commit before you show the toast:
// action
login: async ({commit},loginDTO)=>{
try {
const { data } = await axios.post(loginEndpoint.login, loginDTO)
commit('login', data.userId, data.responseText, true);
} catch(error) {
commit('login', null, error.message, false);
}
}
// mutation
login: (state, userId, response, isLogin) {
state.user.userId = userId;
state.user.response = response;
state.isLogin = isLogin
}
methods:{
...mapActions(['login']),
async login1(){
const loginDTO = {
Username : this.user.Username,
Password: this.user.Password
};
await this.$store.dispatch('login',loginDTO);
this.$toastr.s("Message", "");
}
}

Answer 2

I think all you need to do is call the toast function after the action complete as usual, callback function after ajax returns 200, for example, I used
https://github.com/ankurk91/vue-toast-notification
then run it like so on the callback
this.$toast.open('You did it!');
(make sure the toast has been registered on your vue instance)