vuex-persistedstate

개념

• 화면을 새로고침할 때 vuex의 store에 가지고 있거나 계산되어 있던 값들이 초기화되는 상황이 발생할 수 있다.
• → 이러한 불편함을 해소하기 위해 localstorage를 이용하여 값들을 다시 살려내주는 기능을 하는것이 vuex-peristedstate 플러그인

원리

• vuex를 사용하는 프로젝트는 프로젝트 전체에서 사용되는 변수를 store의 state에 저장하고 사용하게 된다. 그러면 vuex-persistedstate는 이 state에 저장된 변수와 값을 그대로 웹 브라우저의 localstorage에 업데이트 해준다. → 지속적으로 state와 localstorage를 동기화해주는 역할을 한다.
• localstorage에 등록된 값은 쿠키나 세션처럼 화면을 새로고침해도 없어지지 않기 때문에 화면을 로딩하게 되면 localstorage 값을 state에 동기화 시켜준다.

기본 적용 방법

• store의 root인 index.js에 한번만 적용하면 된다.

선택한 모듈만 설정

• Vue 프로젝트가 커서 모든 state값을 localstorage 값에 저장할 경우 퍼포먼스의 문제가 발생할 수 있으므로 필요한 모듈만 선택해서 저장하는 것이 좋다.
• paths [] 안에 적은 모듈만 저장된다.
• 코드에서는 PersistesState 모듈만 저장됨