[Vuejs]-Blink store data after change route

by

0👍

✅

It’s because IDEAS_BOARD has the previous data until the new API call is completed. You would need to display a loader or a blank screen until the API call for the selected board is completed.

From actions, return a promise so that your component knows when is the call completed.

getIdeasFromBoard({ commit, dispatch }, board_id) {
  return new Promise((resolve, reject) => {
      apiClient
        .get('/ideas/' + board_id)
        .then((result) => {
            console.log('success');
            commit("SET_IDEAS_BOARD", result.data);
            resolve()
        })
        .catch(error => {
            console.log('error' + error);
            alert("You have failed to log in. Try again with another credentials.");
            dispatch('auth/logout', null,  { root: true });
            this.$router.push({ name: "public" });
            reject()
        });
  })
},

In your .vue component,

async mounted () {
  this.loading = true // some flag to display a loader instead of data
  await this.$store.dispatch()
  this.loading = false
}

There must be some other ways too like having this loading flag in the Vuex store. But it depends on you

Leave a comment