Vuex state 데이터 새로고침으로부터 지키는 방법

현재 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에는 내가 원하는 데이터만 저장하도록 만들 수 있다.

(안 그러면 모든 데이터가 로컬스토리지에 저장된다!!)

 

이쁘게 로컬에 담기는 걸 확인할 수 있다. 민감한 정보가 담기지 않게 조심하자