Perintah pelaksanaan fungsi penjadualan VueJS menyebabkan masalah

Question

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

Answer 1

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