Vuex 에서 Ajax요청 후 데이터바인딩

[최재문]

날씨정보를 api로 받아와서 데이터바인딩 하려고 하는데요

vuex에 actions로 ajax요청을 한 후 mutation에서 state로 저장되게끔 코드를 짰습니다

근데 템플릿에 데이터바인딩을 하려고 하니까, 오류가 뜨네요

Ajax요청이 끝나지 않은 상태에서 데이터바인딩을 시도해서 오류가 뜨는거같은데..
AJAX 요청이 끝난 후에 데이터바인딩이 되게끔 하려면 코딩을 어떻게 해야할까요

[최재문]

해결했읍니다.
 

[최재문]

근데 왜 해결됐는지를 모르겠어서 다시 질문이용.
콘솔창에 뜨는 에러가 프로미스 에러길래 ajax 에 문제가 있는지 계속 고민했었는데 의외의 곳에서 해결이 되었습니다.

store.js

Sidebar.vue

 

처음에는 store.js에
weatherData : [] 
라고 그냥 빈 어레이로 저장해두고, mutations 안의 함수로 ajax요청해서 받아온 데이터로 어레이 형태로 저장했습니다.
근데 에러가 뜨더라고요?  
그래서 혹시나 하고
위 사진 store.js에 weatherData 기본값을 저런식으로 바꾸니까 잘 되더라구요
기본값을 빈 어레이로 해도 어짜피 mutations 함수에 의해서 ["~~", [{~},{~}...]] 처럼 바뀔텐데
왜 해결됐는지를 모르겠읍니다.

[codingapple]

html에는 weatherData[1]을 가지고 반복문 돌리고 있어서 그런듯요 

weatherData : [] 이렇게 기본값으로 해놓으면 1번째 자료가 없기 때문입니다 

[최재문]

와 그렇네요 
근데 저런식으로 기본값을 하드코딩하는건 안좋은 방법 아닌가요?

[codingapple]

weatherData : [" ", [ ] ]

이렇게 기본값 해놓아도 될 것같은 느낌입니다 

[최재문]

안되네용 아마 .temp 까지 있어서 그런거같아용

[codingapple]

for 반복문 바깥에 if문 쓰면 될듯요 

[최재문]

근데 바인딩할 데이터가 .temp 말고도 .dt, .icon 등 있어서 어려울 것 같아요 ㅜㅜ

[codingapple]

v-if로 만약에 weatherData[1] 안에 뭔가 있으면

안에 있는 div class="sidebar" 보여주세요라고 코드짜면 될듯요 

[글쓴이]

글