[WEB] Vuex 동기화 문제 해결

1. 문제 상황

 

• A페이지에서 데이터를 Vuex에 저장 후 B페이지로 이동
• B페이지는 Vuex에서 데이터를 호출해 사용
• B페이지에서 제대로 데이터를 호출하지 못하는 문제 발생

 

2. 문제 원인

 

• B페이지에서 Vuex 호출시 await/async 처리를 해봤다
  • 효과가 없었음, Vuex는 알아서 동기적으로 작동한다
  • 정확히는, action은 비동기적이지만 mutation은 동기적으로 작동한다 (링크)
• 그렇다면 왜 Vuex의 동기가 깨졌는가?
  • A페이지의 Vuex가 비동기적 동작 이후에 호출되기 때문

    recentPage() {
      axios
        .get("/api/recent", {
          params: {
            userId: this.userId,
          },
        })
        .then((res) => {
          this.$store.commit("SET_COURSE", {
            id: res.itemId,
            len: res.len,
            rate: res.rate,
            data: res.data,
          });
        });
        
      router.push("/recent");
    },

• 위 코드를 보면, axios를 통한 get 호출 후에 Vuex에 commit하게 된다
  • axios를 기다리는동안 router.push로 페이지가 넘어가버리니, 제대로 불러올 수 없음

 

 

3. 해결 방법

 

    async recentPage() {
      await axios
        .get("/api/recent", {
          params: {
            userId: this.userId,
          },
        })
        .then((res) => {
          this.$store.commit("SET_COURSE", {
            id: res.itemId,
            len: res.len,
            rate: res.rate,
            data: res.data,
          });
        });
      router.push("/recent");
    },

• async, await를 추가하면 axios가 동기적으로 작동, 이후 router.push가 실행되면서 문제가 해결된다