Order of Execution for VueJS dispatch function is causing an issue

I’m trying to display a list of announcements (retrieved from API) on the page. I’m using Vuex store and I have a state called announcements. I also want this list to be updated every time the user refreshes/enters the page. So I used lifecycle hooks, particularly the mounted().
I have a dispatch function that takes a club ID as a parameter. The issue is that I try to access the announcement array in the Vue component, it is one "step" behind the version in the Vuex store.

The Following is 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 store ClubDetails.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 statements, the order of execution is not what i expected

I expected the order to be like this: inside data -> inside dispatch -> inside mutation -> after dispatch.

Another issue is that when I refresh the page, i expected mounted() to be called again and the array would be updated and displayed again, but when refreshing all the contents of the array disappear

>Solution :

This is because this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) is making a response to a server and is asynchronus and takes time for the announcemnts to be fetched from the server. While console.log("After dispatch function") gets executed before a response is recieved from the server.

Thats why you see After dispatch function first and inside dispatch function later.

Try putting await before the dispatch 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 as it is a Promise and no need to use await and then together. You can also remove the async from getAnnouncements as 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)
            })
        },