L'ordre d'exécution des fonctions de planification VueJS pose des problèmes

Question

J'essaie d'afficher une liste d'annonces (récupérées de l'API) sur une page. J'utilise une boutique Vuex et j'ai un statut appelé Annonce. Je souhaite également que cette liste soit mise à jour chaque fois que l'utilisateur actualise/entre dans la page. J'ai donc utilisé des hooks de cycle de vie, spécifiquement Mounted(). J'ai une fonction de répartition qui prend un identifiant de club comme paramètre. Le problème est que j'essaie d'accéder au tableau d'annonces dans le composant Vue et c'est une étape plus lente que la version dans le magasin Vuex.

Le contenu suivant se trouve dans le composant 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")
  },

Ceci est ma boutiqueClubDetails.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;
        }
    },
};

Après le relevé d'impression, l'ordre d'exécution n'est pas ce à quoi je m'attendais

L'ordre que j'attends est le suivant : données internes -> expédition interne -> mutation interne ->

Un autre problème est que lorsque j'actualise la page, je m'attends à ce que Mounted() soit à nouveau appelé et que le tableau soit mis à jour et affiché à nouveau, mais lorsque j'actualise, tout le contenu du tableau disparaît

Answer 1

C'est parce que this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) 正在对服务器做出响应并且是异步的，并且需要时间从服务器获取公告。而 console.log("Afterdispatch function") est exécuté avant que la réponse ne soit reçue du serveur.

C'est pourquoi vous voyez d'abord la fonction de post-expédition, puis la fonction de répartition interne.

Essayez d’attendre avant l’expédition comme ceci.

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

Vous devez renvoyer la méthode axios.get car il s'agit d'une promesse et il n'est pas nécessaire d'utiliser wait et puis en même temps. Vous pouvez également supprimer l'async de getAnnouncements puisque vous n'utilisez plus wait.

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