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