인프런 커뮤니티 질문&답변

안녕하세요.

vuex가 새로고침을 하면 state가 날아가버리기 때문에 action이나 mutation을 컴포넌트의 created훅에 넣어서 쓰고 있습니다.

이렇게 하면 해당 컴포넌트에는 문제 없이 state가 유지되는데, getters를 불러들인 뒤 해당 컴포넌트의 하위 컴포넌트에 props데이터로 넘겨주면, vue개발자 도구로 보기에는 분명히 값이 존재하는데 하위 컴포넌트에서는 값이 존재하지 않게 됩니다. console.log를 작동시켜 보면 빈 값이 나오네요. 

하위 컴포넌트가 라우팅에 따라서 다르게 보여져야 할 부분이라 <router-view :gettersData="gettersData"/> 이런 식으로 넣었는데 혹시 router-view 태그는 props를 받지 못하는 건지 궁금합니다.

만약 문제 없이 받을 수 있다면, 혹시 router-view가 중첩되서 발생하는 문제가 아닐까 싶네요. 지금 컴포넌트 구조가...

//parent comp
<router-view/>

//child comp

<div></div> //repetitive comp
<router-view :gettersData="gettersData"/>

이런 모양새라서 혹시 router-view 태그가 중첩 되면 안되는 건가 싶기도 하고 그렇네요. 

 

질문을 요약해보자면, 

 

1. Getters를 하위 컴포넌트의 props로 넘겨도 되는지? 

2. Router-view 태그로도 props를 보낼 수 있는지? 

3. router-view 태그를 부모와 자식 태그에서 중첩해서 사용해도 되는지?

정도가 될 것 같습니다. 감사합니다!