VueJS 스케줄링 기능의 실행 순서로 인해 문제가 발생함

Question

API에서 가져온 공지사항 목록을 페이지에 표시하려고 합니다. Vuex 스토어를 사용하고 있으며 Announcement라는 상태가 있습니다. 또한 사용자가 페이지를 새로 고치거나 들어갈 때마다 이 목록이 업데이트되기를 원합니다. 그래서 저는 라이프사이클 후크, 특히 Mounted()를 사용했습니다. 클럽 ID를 매개변수로 사용하는 디스패치 함수가 있습니다. 문제는 Vue 구성 요소의 공지 사항 배열에 액세스하려고 하는데 Vuex 스토어의 버전보다 한 단계 느리다는 것입니다.

다음 콘텐츠는 Vue 구성 요소 ClubDetails.vue

에 있습니다. 으아악

여기가 내 가게입니다ClubDetails.js

으아악

print 문 이후 실행 순서가 예상한 것과 다릅니다.

내가 예상하는 순서는 내부 데이터 -> 내부 디스패치 -> 디스패치 후입니다.

또 다른 문제는 페이지를 새로 고칠 때 Mounted()가 다시 호출되고 배열이 업데이트되어 다시 표시될 것으로 예상하지만 새로 고치면 배열의 모든 내용이 사라진다는 것입니다

Answer 1

서버로부터 응답을 받기 전에 this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) 正在对服务器做出响应并且是异步的，并且需要时间从服务器获取公告。而 console.log("Afterdispatch function")가 실행되기 때문입니다.

그래서 포스트 디스패치 기능이 먼저 보이고, 그 다음에 내부 디스패치 기능이 보입니다.

이렇게 발송 전 대기 시간을 설정해 보세요.

으아악

Promise이기 때문에 axios.get 메소드를 반환해야 하며, wait와 then을 동시에 사용할 필요가 없습니다. 더 이상 Wait를 사용하지 않으므로 getAnnouncements에서 async를 제거할 수도 있습니다.

으아악