User 정보 상태관리

❗ 문제 상황 : getInfo() 로 얻어온 state.user 가 undefined 로 유실됨 → login 여부 체크 불가능 → state.user 관련된 정보 (ex. 크레딧) 누락

상태 관리 라이브러리 활용하지 않음

 

⇒ 보통 상태관리는 라이브러리를 통해 action, mutation, getter 및 state 를 보관

해당 상태는 setter 에 mutation, action 의 기능을 다 담고 있어서 발생하는 것 같았다.

undefined 정의

값이 할당되지 않은 변수를 의미

 

🤔 상태관리에 대한 고찰

전역 데이터는 한 번만 호출해서 계속 가지고 있을 수 있는지

 

→ 단, 라우터 이동 혹은 새로고침 시에 다시 해당 api 를 호출하기 (브라우저 내 데이터 유지 방법)

즉, 전역 App.vue 와 같은 라우터 상위 컴포넌트에 info api 를 부르지 않고 각각 라우팅 했을 때

진입 전 info api 를 불러서 data setter 를 실행

 

⇒ 마치 전역에서 api 를 관리하는 것처럼 활용할 수 있으나 모든 라우터마다 설정해줘야하는 단점이 있다.

 

 

** 로그인 여부는 localstorage 에 boolean 으로 가지고 있어도 좋은듯 ..

 

localstorage 활용

여기에 이제 vue3 에서 새로 나온 watchEffect 를 더한..

 

💡 진입 시 isLogin 은 false → api 호출해서 isLogin localstorage 에 set → oauth 를 통한 로그인 인증 후 메인으로 강제 리프레시 → 이 때, api 호출보다 ui 가 먼저 그려지기 때문에 watchEffect 로 isLogin 감시해서 변경 값을 반영