[Vue.js / Kakao API] 비동기로 요청한 위치 정보가 마커에 찍히지 않을 때 해결방법 (Vuex)

 

문제상황

프로젝트 중 아파트의 위치 정보(상세주소)를 DB에서 받아와 마커에 찍는 것이 잘 되지 않았다.

여러가지 추측해 보건데 아파트의 위치정보를 axios로 받아오는 동작과, 상세주소를 Kakao Map 위에 마커로 표시하늗 동작이 비동기적으로 일어나서 순서가 잘 안맞았던 것 같다.

 

 

당시 참고했던 코드

주소로 장소 표시하기 : https://apis.map.kakao.com/web/sample/addr2coord/

 

Vuex란? : https://vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

 

 

해결방법

사실 내가 아니라 페어가 해결해줌.. 천재시다..

 

요약하자면

1) isOk라는 state를 만들어서 선행 작업이 모두 완료됐을 때 isOk를 값을 바꾼다. (mutations에서)

2) component 파일에서 watch로 isOk를 감시하다 값이 변경되었을 때, 마커를 찍는 동작을 한다.

 

해당 컴포넌트 파일(Apt.vue)

isOk라는 mapState를 추가한다.

 

watch에서 isOk가 변경될 때마다 setAptsOnMap()가 실행된다.

(참고 : watch 옵션을 통해 데이터 변경에 반응한다.)

 

methods의 setAptsOnMap 부분 (지도에 마커를 찍는다.)

 

 

 

Vuex의 state를 관리하는 store.js

isOk가 변경되는 경우는 아래처럼 아파트 정보(상세주소)를 포함하는 경우이다.

mutations의 GET_APT_DEAL_INFO 부분(아파트 정보(상세주소)를 조회)

 

 

끝~