Saya mencoba menampilkan daftar pengumuman (diambil dari API) di halaman. Saya menggunakan toko Vuex dan saya memiliki status yang disebut pengumuman. Saya juga ingin daftar ini diperbarui setiap kali pengguna me-refresh/memasuki halaman. Jadi saya menggunakan kait siklus hidup, terutama mount(). Saya memiliki fungsi pengiriman yang menggunakan ID klub sebagai parameter. Masalahnya adalah saya mencoba mengakses array pengumuman di komponen Vue, itu adalah satu "langkah" di belakang versi di toko Vuex.

Berikut ini ada di 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 adalah toko saya ClubDetails.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;
        }
    },
}; 

Setelah pernyataan cetak, urutan eksekusi tidak seperti yang saya harapkan javascript vue.js vue-component vuex vuex-modules

3
Ahmet-Salman 27 November 2021, 10:14

1 menjawab

Jawaban Terbaik

Ini karena this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) membuat respons ke server dan tidak sinkron dan membutuhkan waktu agar pengumuman diambil dari server. Sementara console.log("After dispatch function") dijalankan sebelum respons diterima dari server.

Itulah mengapa Anda melihat Fungsi Setelah pengiriman terlebih dahulu dan fungsi pengiriman di dalam kemudian.

Coba letakkan menunggu sebelum pengiriman seperti ini.

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

Anda harus mengembalikan metode axios.get karena ini adalah Janji dan tidak perlu menggunakan menunggu dan kemudian bersama-sama. Anda juga dapat menghapus async dari getAnnouncements karena Anda tidak lagi menggunakan menunggu.

 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)
            })
        },
2
Saaransh Menon 27 November 2021, 10:31