Rumah > Soal Jawab > teks badan
Saya cuba memaparkan senarai pengumuman (diambil daripada API) pada halaman. Saya menggunakan kedai Vuex dan saya mempunyai status yang dipanggil Pengumuman. Saya juga mahu senarai ini dikemas kini setiap kali pengguna menyegarkan/memasuki halaman. Jadi saya menggunakan cangkuk kitaran hayat, khususnya Mounted(). Saya mempunyai fungsi penghantaran yang mengambil ID kelab sebagai parameter. Masalahnya ialah saya cuba mengakses tatasusunan pengumuman dalam komponen Vue dan ia adalah satu langkah yang lebih perlahan daripada versi di kedai Vuex.
Kandungan berikut terletak dalam komponen 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") },
Ini kedai sayaClubDetails.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; } }, };
Selepas cetak kenyataan, perintah pelaksanaan tidak seperti yang saya harapkan
Tempahan yang saya jangkakan ialah: data dalaman ->
Masalah lain ialah apabila saya menyegarkan halaman, saya menjangkakan mounted() akan dipanggil semula dan tatasusunan akan dikemas kini dan dipaparkan semula, tetapi apabila saya menyegarkan semula semua kandungan tatasusunan hilang
P粉0256324372024-04-07 00:08:29
Ini kerana this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
正在对服务器做出响应并且是异步的,并且需要时间从服务器获取公告。而 console.log("Afterdispatch function")
dilaksanakan sebelum respons diterima daripada pelayan.
Itulah sebabnya anda melihat fungsi selepas penghantaran dahulu, dan kemudian fungsi penghantaran dalam.
Cuba tunggu sebelum penghantaran seperti ini.
async mounted() { await this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) console.log("After dispatch function") },
Anda harus mengembalikan kaedah axios.get kerana ia adalah Janji dan tidak perlu menggunakan await dan kemudian pada masa yang sama. Anda juga boleh mengalih keluar async daripada getAnnouncements
kerana anda tidak lagi menggunakan await.
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) }) },