현재 Vuex에 loginState라고 저장해 두고 로그인 상태를 판단하도록 만들었다.
로그인을 진행하면 true로 변경되는 값.
그런데 여기서 새로고침을 하면?
false로 데이터가 바뀌게 된다.
Vuex에서 새로고침 하면 state가 날라가는 이유가 브라우저 메모리에 저장되기 때문이다.
SPA는 페이지를 옮기거나 새로고침하는 것이 아니라 데이터가 보존되는데, 새로고침을 하는 순간 브라우저 메모리가 날아가서 state가 없어지는 것.
우리는 이걸 막기 위해 스토리지를 이용하거나 쿠키를 이용해야한다.
vuex-persistedstate
해당 라이브러리를 통해 문제를 해결할 수 있다.
초기화 이슈가 많아지면서 누군가 npm을 만들어두었기에, 잘 이용만 하자
npm install vuex-persistedstate
이지하게 설치 완료
store에 일단 import를 해준다
import createPersistedState from "vuex-persistedstate";
그리고 store.js의 plugins에 추가해 준다.
plugins: [
createPersistedState({
paths: ['loginState'],
})
],
paths에는 내가 원하는 데이터만 저장하도록 만들 수 있다.
(안 그러면 모든 데이터가 로컬스토리지에 저장된다!!)
이쁘게 로컬에 담기는 걸 확인할 수 있다. 민감한 정보가 담기지 않게 조심하자
반응형
'Vue' 카테고리의 다른 글
오랜만에 해보는 Vuex 도입 (1) | 2024.04.01 |
---|---|
Vuex에서 새로고침 시 store 초기화 막는 방법 (0) | 2023.05.17 |
Vuex에서 회원가입 하면 로그인 컴포넌트 불러오는 방법. (1) | 2023.05.16 |
vue에서 API_KEY 설정하는 방법 (0) | 2023.05.16 |