Die Ausführungsreihenfolge der VueJS-Planungsfunktionen verursacht Probleme

Question

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

Answer 1

这是因为 this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) 正在对服务器做出响应并且是异步的，并且需要时间从服务器获取公告。而 console.log("Afterdispatch function") 在从服务器收到响应之前执行。

这就是为什么您首先看到后调度函数，然后再看到内部调度函数。

尝试像这样在调度之前放置等待。

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

你应该返回axios.get方法，因为它是一个Promise，不需要同时使用await和then。您还可以从 getAnnouncements 中删除异步，因为您不再使用等待。

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