화면을 새로고침할 때 vuex의 store에 가지고 있거나 계산되어 있던 값들이 초기화되는 상황이 발생할 수 있다.
→ 이러한 불편함을 해소하기 위해 localstorage를 이용하여 값들을 다시 살려내주는 기능을 하는것이 vuex-peristedstate 플러그인
원리
vuex를 사용하는 프로젝트는 프로젝트 전체에서 사용되는 변수를 store의 state에 저장하고 사용하게 된다. 그러면 vuex-persistedstate는 이 state에 저장된 변수와 값을 그대로 웹 브라우저의 localstorage에 업데이트 해준다. → 지속적으로 state와 localstorage를 동기화해주는 역할을 한다.
localstorage에 등록된 값은 쿠키나 세션처럼 화면을 새로고침해도 없어지지 않기 때문에 화면을 로딩하게 되면 localstorage 값을 state에 동기화 시켜준다.
기본 적용 방법
store의 root인 index.js에 한번만 적용하면 된다.
선택한 모듈만 설정
Vue 프로젝트가 커서 모든 state값을 localstorage 값에 저장할 경우 퍼포먼스의 문제가 발생할 수 있으므로 필요한 모듈만 선택해서 저장하는 것이 좋다.
