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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 lafonction de post-expédition, puis lafonction 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
getAnnouncementspuisque 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) }) },