Vue.js로 프로젝트를 개발하는 경우 화면을 이동 할 때 일반 웹페이지처럼 페이지 전체를 새로 고침하는 방식이 아니라 SPA(Single Page Application)와 같이 javascript로 필요한 부분만 교체하는 식으로 개발을 하게 됩니다. 이런 SPA방식의 개발은 모던한 웹사이트 개발에서 많은 잇점을 주고 있는 것이 사실이지만 몇가지 불편한 부분도 있습니다. 지금 소개하려고 하는 vuex-persistedstate는 이러한 불편을 해소해 주는 Vue플러그인이라고 생각하면 됩니다.
보통 모바일 웹이나 앱일 경우는 크게 착각하지 않는데 일반 웹브라우저에서 띄운 경우 습관적으로 뒤로가기 버튼을 클릭 할 때 화면이 새로고침이 되어 버립니다. 또는 기타 다른 이유로 화면을 새로고침하는 경우가 발생하게 되는데 이럴 때 지금까지 vuex의 store에 가지고 있거나 계산되어져 있던 모든 값들이 초기화 되어버리는 상황이 발생하게 됩니다.
이런 불편함을 해소하기 위해 localstorage를 이용하여 값들을 다시 살려내주는 기능을 하는 것이 vuex-persistedstate 플러그인입니다.
vuex-persistedstate는 vuex를 기반으로 하기 때문에 vuex를 사용하는 프로젝트에서 사용할 수 있습니다. NUXT도 vuex를 기반으로 하므로 사용할 수 있습니다.
vuex-persistedstate 원리
간단하게 원리를 말씀드리면, vuex를 사용하는 프로젝트는 프로젝트 전체에서 사용되는 변수를 store의 state에 저장을 하고 사용 하게 됩니다. 그러면 vuex-persistedstate는 이 state에 저장된 변수와 값을 그대로 웹브라우저의 localstorage에 업데이트를 해 줍니다. 다시 말하면 state와 localstorage를 지속적으로 동기화를 해주는 역활을 합니다. localstorage에 등록된 내용은 쿠키나 세션처럼 화면을 새로고침 해도 없어지지 않기 떄문에 새로 화면이 로딩을 하게 되면 localstorage에 있는 내용을 state에 다시 동기화를 시켜주게 됩니다 그러면 다시 값들이 살아나게 되죠. 결과적으로 새로고침을 해도 값들이 다시 그대로 존재하게 되는 것입니다.
다만 고려해야 할 점은 이 state의 변수를 너무 많이 사용하게 되면 프로그램의 퍼포먼스가 떨어지는 단점이 있기 때문에 vuex-persistedstate의 옵션으로 state 중 저장이 필요한 변수만 선택하여 저장하는 것이 좋습니다.
vuex-persistedstate 설치하기
패키지 매니저로….
npm을 사용하신다면 npm install --save vuex-persistedstate
yarn을 사용하신다면 yarn add vuex-persistedstate
이 명령어로 먼저 설치를 해 줍니다.
vuex-persistedstate 적용하기
기본 설정
기본적으로 적용하는 방법은 매우 간단합니다. 일반적으로 store의 root인 index.js에 한번만 적용하면 됩니다.
index.js
import createPersistedState from "vuex-persistedstate"; const store = new Vuex.Store({ // ... plugins: [createPersistedState()], });선택한 모듈만 설정
Vue프로젝트가 커서 모든 state값을 localstorage에 저장할 경우 퍼포먼스의 문제가 발생할 수 있으므로 필요한 모듈만 선택해서 저장하는 것이 좋습니다.
아래의 예제는 auth와 cart 모듈의 state값만 저장되고 복구됩니다.
import Vue from "vue"; import Vuex from "vuex"; import createPersistedState from "vuex-persistedstate"; import { Auth } from "./auth"; import { Cart } from "./cart"; import { Products } from "./products"; Vue.use(Vuex); export default new Vuex.Store({ modules: { auth: Auth, cart: Cart, products: Products, }, plugins: [ createPersistedState({ //주목! : 여기에 쓴 모듈만 저장됩니다. paths: ["cart","auth"], }), ], });참고 좌표
좀 더 자세한 설명은 아래의 위치에서 확인하시고 사용하시면 됩니다.
https://github.com/robinvdvleuten/vuex-persistedstate#readme
