[Vuejs]-VueX/VueJs : Execute code in component after async process

by

0👍

Well,

It would be better idea if You trigger the toast from the Vuex store itself as mentioned below.

callAddToCart: ({ commit }, payload) => {
    axiosBackend.put('/user/profile', userData, { headers: { Authorization: 
       state.authString }}).then(response => {
       commit("setLoading", false, { root: true });
       payload.cartKey = response.key;
       commit("setNotification", {
           type: 'success',
           title: `title`,
       });
       commit("ADD_TO_CART", payload);
   });
},

and inside mutation you can have a general notification toast and you can pass type, message and title as below.

setNotification(state, {type, message, title}) {
    state.flash = { 
       type,
       title, 
       message
    }
}

NOTE: Do not forget to load toast element at the root level in order to display in the UI.

Here is working example

Hope this helps!

Leave a comment