vuex 데이터바인딩 질문

[최재문]

vuex 질문입니다

vuex state 에 nationalCounter : {} 이런식으로 스테이트 지정해놓고
actions에서 axios로 데이터를 불러오고 .then(result => context.commit('setNationalCounter', result)
이렇게 데이터 보내면서 커밋한다음
mutations 에서 setNationalCounter(state, payload) { state.nationalCounter = { ...payload } } 
이런식으로 nationalCounter 스테이트에다가 박았습니다

Index.vue에는
onMounted(() => {
store.dispatch('getNationalCounter')
})

이런식으로 코드를 자서 마운트되면 actions 의 getNationalCounter 함수가 작동하도록 했습니다.
그리고 Index.vue에다가 
<q-card-section>
<div class="text-h6">국내 시・도별 코로나 현황</div>
<div class="text-subtitle2">신규 확진 : {{ store.state.nationalCounter.NowCase }}</div>
</q-card-section>

이런식으로 바인딩을 하면 오류가 뜹니다.
오류가 뜨는 이유는 알고 있습니다 axios get 요청이 끝나지 않아서 store.state.nationalCounter 에는 NowCase라는 요소가 없으니까 오류가 뜨는거죠
근데 이렇게 mounted 되자마자 get요청을 해서 요청된 데이터를 바인딩 해야 할 일이 많은데
get요청이 끝난 후에 데이터가 바인딩되게끔 코드를 짜려면 어떻게 해야할까요?

바인딩할 html 태그에 v-if="store.state.nationalCounter.NowCase !== undefined" 이런것도 해봤는데 안됩니다.

[최재문]

전에도 이런 문제가 있었어서 그때는 어쩔 수 없이 state에 미리 nationalCounter : { NowCase : ""  }
이런식으로 껍데기값을 주는식으로 코드를 짰었는데
지금은 처리해야 할 데이터 양도 많고 저런식으로 하드코딩 하기 싫어져서유

[codingapple]

loaded : false 이런 데이터를 하나 추가해놓고

v-if="loaded == true" 이 경우에 <div> 보여달라고 코드짠 뒤에

ajax 요청이 완료된다면 데이터를 true로 바꾸면 될듯요 

 

[최재문]

이런식으로 하고 컨테이너 div에 v-if="store.state.ajaxLoaded" 이렇게 했는데도
Uncaught ( in promise ) 오류가 뜹니다 ㅠㅠ

[codingapple]

그 에러는 어디서 나는 에러입니까

근데 vuex용 파일에서 state 만들 땐 data(){} 말고 state : {} 에 만드는게 좋지 않을까요 

then 도 2개 쓰지말고 하나안에서 context.commit() 두번 해도 됩니다 

[최재문]

Uncaught (in promise) 이 에러는 브라우저 콘솔에서 납니다. serve 할때 node 콘솔에서는 에러 안 나구요
state : {} 에 넣어봐도 안됐었어서 바꿔봤는데 똑같이 에러 뜨네요
일단 다시 state : { nationalCounter : {} } 이런식으로 바꿔놓았습니다.

vuex state 데이터바인딩 안 했을때는

이런식으로 잘 뜹니다
근데 
<div class="text-subtitle2">신규 확진 : {{ store.state.nationalCounter.NowCase }}  </div>
이런식으로 바인딩하면

이런 워닝도 뜨고

이런 에러도 뜹니다

[최재문]

v-if="store.state.ajaxLoaded" 이거만 넣어도 똑같은 에러가 뜨네요
애초에 ajaxLoaded 는 state에 false로 선언이 되어있는데도 왜 에러가 뜨는지도 모르겠네요

[codingapple]

$store.state 이렇게 써봅시다 

[최재문]

이런식으로 setup 에 store 정의했는데 $store라고 해야할까요?
$store 해도 안되네요 ㅠ

[최재문]

아 $store로 하고 다시 serve하니까 되네요 감사합니다 ㅠㅠ

[글쓴이]

글