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
1
0
0
C'est parce que this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) 正在對服務(wù)器做出響應(yīng)并且是異步的，并且需要時間從服務(wù)器獲取公告。而 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)
})
},
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
