Ich versuche, eine Liste von Ankündigungen (von der API abgerufen) auf einer Seite anzuzeigen. Ich verwende einen Vuex-Store und habe einen Status namens Announcement. Ich möchte auch, dass diese Liste jedes Mal aktualisiert wird, wenn der Benutzer die Seite aktualisiert/betritt. Deshalb habe ich Lifecycle-Hooks verwendet, insbesondere Mounted(). Ich habe eine Versandfunktion, die eine Club-ID als Parameter akzeptiert. Das Problem ist, dass ich versuche, auf das Ankündigungs-Array in der Vue-Komponente zuzugreifen, und es ist einen Schritt langsamer als die Version im Vuex-Store.

Der folgende Inhalt befindet sich in der Vue-Komponente 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")
  },

Das ist mein ShopClubDetails.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;
        }
    },
};

Nach der Druckanweisung entspricht die Ausführungsreihenfolge nicht meinen Erwartungen

Die Reihenfolge, die ich erwarte, ist diese: interne Daten –> interne Mutation –>

Ein weiteres Problem besteht darin, dass ich beim Aktualisieren der Seite erwarte, dass mount() erneut aufgerufen wird und das Array aktualisiert und erneut angezeigt wird, aber wenn ich die Seite aktualisiere, verschwinden alle Inhalte des Arrays