VueJS 디스패치 기능의 실행 순서에서 문제가 발생하고 있습니다.

VueJS 디스패치 기능의 실행 순서에서 문제가 발생하고 있습니다.

페이지에 (API에서 취득한) 공지 목록을 표시하려고 합니다.Vuex 스토어를 사용하고 있는데 안내방송이라는 주를 가지고 있습니다.또, 유저가 페이지를 갱신/입력 할 때마다, 이 리스트를 갱신하고 싶다고 생각하고 있습니다.그래서 라이프 사이클 훅, 특히 마운트형()을 사용했습니다.클럽 ID를 파라미터로 하는 디스패치 기능이 있습니다.문제는 Vue 컴포넌트의 아나운스 어레이에 액세스하려고 하면 Vuex 스토어의 버전보다 "단계" 늦게 액세스한다는 것입니다.

다음은 Vue 컴포넌트 Club Details에 있습니다.표시하다

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

여기는 제 가게 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;
        }
    },
}; 

인쇄문 후 실행순서가 예상과 다르다.

디스패치 후 내부 데이터 -> 내부 디스패치 -> 내부 변환 -> 내부 변환 -> 순서는 다음과 같습니다.

또 다른 문제는 페이지를 새로 고칠 때 mounted()가 다시 호출되어 어레이가 업데이트되고 다시 표시될 것으로 예상되지만 어레이의 모든 내용이 새로고침될 경우

그 이유는this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)는 서버에 응답하고 있으며 비동기이며 서버에서 아나운스먼트를 가져올 때까지 시간이 걸립니다.하는 동안에 console.log("After dispatch function")는 서버로부터 응답을 수신하기 전에 실행됩니다.

그래서 After dispatch 기능이 먼저 표시되고 inside dispatch 기능이 나중에 표시됩니다.

이렇게 디스패치 전에 대기해 보세요.

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

axios.get 메서드는 Promise이므로 wait를 사용할 필요가 없으므로 함께 반환해야 합니다.또, 비동기 파일을getAnnouncements더 이상 대기시간을 사용하지 않으셔도 됩니다.

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

언급URL : https://stackoverflow.com/questions/70132762/order-of-execution-for-vuejs-dispatch-function-is-causing-an-issue