작성
·
257
1
안녕하세요.
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 태그를 부모와 자식 태그에서 중첩해서 사용해도 되는지?
정도가 될 것 같습니다. 감사합니다!
답변 1
0
안녕하세요 시작하기 강의 레벨과는 다른 수준의 질문이네요 :)
답변 간단히 드릴게요.
1. Getters를 하위 컴포넌트의 props로 넘겨도 되는지?
답변) 네 관계 없습니다.
2. Router-view 태그로도 props를 보낼 수 있는지?
답변) 네 가능합니다.
3. router-view 태그를 부모와 자식 태그에서 중첩해서 사용해도 되는지?
답변) 중첩해서 사용한다는게 정확히 어떤 의미인지 모르겠네요..! 라우터의 자세한 사용법은 학습 로드맵에서 안내 드리는 내용을 참고하시거나 아래 문서 확인하시면 될 것 같아요 :)
https://v3.router.vuejs.org/guide/essentials/nested-routes.html