The execution order of VueJS scheduling functions causes problems-PHP Chinese Network Q&A

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 calledAnnouncement. 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

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) }) },

reply all (1)

P粉0256324372024-04-07 00:08:29 1 floor

This is becausethis.$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. Andconsole.log("Afterdispatch function")is executed before the response is received from the server.

That's why you see thepost-dispatch functionfirst, and then theinternal 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 fromgetAnnouncementssince you are no longer using await.