The execution order of VueJS scheduling functions causes problems

Question

I'm trying to display a list of announcements (retrieved from the API) on a page. I'm using a Vuex store and I have a status called Announcement. I also want this list to be updated every time the user refreshes/enters the page. So I used lifecycle hooks, specifically Mounted(). I have a dispatch function that takes a club ID as a parameter. The problem is that I try to access the announcements array in the Vue component and it's a step slower than the version in the Vuex store.

The following content is located in the Vue component ClubDetails.vue

name: "ClubDetails",
  data(){
    console.log("inside data")
    return {
      club_id: this.$route.params.clubID,
      announcements: this.$store.state.ClubDetails.announcements
    }
  },
  mounted() {
      this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
      console.log("After dispatch function")
  },

This is my storeClubDetails.js

namespaced: true,
    state: {
        announcements: [],
    },
    mutations: {
        setAnnouncements(state, newArr) {
            state.announcements = newArr
            console.log("Inside Mutation")
        },
    },
    actions: {
        async getAnnouncements({ commit, state }, club) {
            const params = new URLSearchParams([
                ['clubId', club]
            ]);
            await axios.get("http://127.0.0.1:8000/api/announcements", { params }).then(res => {
                console.log("inside dispatch function")
                commit('setAnnouncements', res.data)

            }).catch(err => {
                console.log(err)
            })
        },
    },
    getters: {
        getAllAnnouncements(state) {
            return state.announcements;
        }
    },
};

After the print statement, the execution order is not what I expected.

The order I expect is this: internal data -> internal dispatch -> internal mutation -> after dispatch.

Another problem is that when I refresh the page, I expect mounted() to be called again and the array will be updated and displayed again, but when refreshed all the contents of the array are gone

Answer 1

This is because this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) is responding to the server and is asynchronous and takes time to get the announcements from the server. And console.log("Afterdispatch function") is executed before the response is received from the server.

That's why you see the post-dispatch function first, and then the internal dispatch function.

Try placing a wait before dispatching like this.

async mounted() {
      await this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
      console.log("After dispatch function")
  },

You should return the axios.get method because it is a Promise and there is no need to use await and then at the same time. You can also remove async from getAnnouncements since you are no longer using await.

getAnnouncements({ commit, state }, club) {
            const params = new URLSearchParams([
                ['clubId', club]
            ]);
            return axios.get("http://127.0.0.1:8000/api/announcements", { params }).then(res => {
                console.log("inside dispatch function")
                commit('setAnnouncements', res.data)

            }).catch(err => {
                console.log(err)
            })
        },