Estoy tratando de mostrar una lista de anuncios (recuperados de la API) en la página. Estoy usando la tienda Vuex y tengo un estado llamado anuncios . También quiero que esta lista se actualice cada vez que el usuario actualice/ingrese a la página. Así que usé ganchos de ciclo de vida, particularmente el montado(). Tengo una función de envío que toma una ID de club como parámetro. El problema es que trato de acceder a la matriz de anuncios en el componente Vue, está un "paso" detrás de la versión en la tienda Vuex.

Lo siguiente está en el componente Vue 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") },

Esta es mi tienda 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; } }, };

Después de las declaraciones de impresión, el orden de ejecución no es el que esperaba

Esperaba que el orden fuera así: datos internos -> despacho interno -> mutación interna -> después del despacho.

Otro problema es que cuando actualizo la página, esperaba que se llamara de nuevo amount() y que la matriz se actualizara y mostrara nuevamente, pero al actualizar todo el contenido de la matriz desaparece