vuex 적용시 질문

Question

vue3로 강의를 실습 중이라 vuex를 활용해 진행하고 있습니다.   spinner처리 때문에 위 코드처럼 next()에 setTimeout을 걸었는데, 기존에 불러왔던 데이터가 상태에 남아있어서 그런지, 예를들어 ask-> news탭을 누를 경우 news 데이터가 바로 반영이 되어 리스트 화면이 변경된 뒤에, 1초 후 화면이 깜빡 거리면서 다시 news 데이터가 뜹니다. 이를 해결하기 위해, mutations에 위와 같이 state를 비워 주는 코드를 추가하여 해결했는데, vuex를 사용하게되면 이런식으로 화면이 바뀔 때 상태값들을 초기화 시켜주어야 하는걸까요?

captain · Answer

안녕하세요, 네 뷰엑스는 전역 상태다 보니 페이지가 바뀌더라도 상태가 남아있을 거예요. 명시적으로 초기화 해주셔야 합니다 :)

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. vuex를 사용하는 Vue.js 애플리케이션에서 뷰가 변경될 때 기존의 상태를 초기화하는 것은 일반적인 작업입니다. 특히 여러 뷰에서 같은 상태를 공유할 경우, 사용자가 새로운 뷰로 이동했을 때 이전 뷰의 상태가 남아있게 되면 예상치 못한 결과가 나타날 수 있기 때문에 상태를 초기화하는 것이 좋은 방법입니다. 다만, 모든 상태를 항상 초기화할 필요는 없으며, 뷰에 따라 유지되어야 하는 상태가 있을 수 있습니다. 상태 초기화는 그 상태가 해당 뷰에 특화된 것인지, 다른 뷰와 공유되어야 하는 것인지에 따라 결정해야 합니다. 주어진 코드 상황에서는 CLEAR_STATE 뮤테이션을 사용하여 상태를 초기화하고, 그 이후에 필요한 데이터를 불러오는 것으로 문제를 해결하셨네요. 이 방법은 이전 상태로 인해 화면에 잘못된 데이터가 보여지는 것을 방지하는 효과적인 방법입니다. setTimeout 을 사용하여 로딩 상태를 관리하는 것은 사용자 경험을 떨어뜨릴 수 있으므로, 가능하다면 데이터가 실제로 로드될 때까지 기다렸다가 상태를 변경하는 방식으로 바꾸는 것이 더 좋습니다. 예를 들어, API 호출을 통해 데이터를 가져오는 경우, 데이터가 완전히 로드되었을 때 loading 상태를 종료하는 것이 사용자에게 자연스러운 로딩 경험을 제공할 것입니다. 또한, 로드된 데이터의 처리가 필요한 경우에는 vuex 의 actions 안에서 비동기 로직을 처리하고, 결과에 따라 상태를 업데이트하는 구조로 구현하는 것이 적절할 수 있습니다. 추가로 궁금한 점이 있으시면 링크를 통해 인프런의 FAQ 페이지 에 문의해보시길 권장드립니다.