[Vuex] 🕹️ Vuex-Persistedstate 사용법.

목차

웹 사이트를 이용하는 유저들은 브라우저를 사용하면서 뒤로가기 버튼을 클릭하여 화면이 새로고침이 되어 버리는 경우, 또는 다른 이유로 화면을 새로고침하는 경우가 있다. 이렇게 되면 Vuex의 store.js에 있거나 상태가 변경된 모든 값들이 초기화 되어버린다.

 

이러한 상황을 방지하기 위해 JavaScript의 localstoarge 관련 함수를 사용하기도 하지만, Vuex의 자료들을 localstorage로 자동으로 저장시키고 다시 사용할 수 있게끔 도와주는 플러그인이 Vuex-Persistedstate다.

 

그럼 이번 글에서는 Vuex-Persistedstate의 사용법에 대해 포스팅해보겠다.

---

Vuex-Persistedstate 설치하기

우선 Vuex-Persistedstate를 설치합니다. 명령어는 다음과 같습니다.

Shell

$ npm install --save vuex-persistedstate
# or
$ yarn add vuex-persistedstate

---

필요한 데이터만 저장하기

Vue로 만든 프로젝트의 규모가 커져서 모든 state값을 localstorage에 저장할 경우 속도가 느려지는 문제가 발생할 수 있기 때문에, 필요한 모듈만 선택해서 저장하는 것이 좋다.

밑의 코드대로 작성하면 auth와 cart 모듈의 state값만 저장되고 다시 사용할 수 있게 된다.

JavaScript

import createPersistedState from 'vuex-persistedstate';

const store = createStore({
    state() {
        return {
            value: 0,
            more: {},
        }
    },
	plugins: [
        createPersistedState({
            // 여기에 적은 state 값만 저장됨
            paths: ["value"],
        })
    ],
    {...options}
})

export default store

---

📁 예제 파일

Vuex를 사용하여 만든 Counter 연습 페이지 예제 파일.

GitHub - light9639/Vuex-Counter: ⚗️ Vuex로 만든 Counter 연습 페이지입니다.

---

📁 Vuex-Persistedstate 공식 문서

Vuex-Persistedstate의 공식 Github 문서로 다양한 예제 및 사용법이 적혀있다.

GitHub - robinvdvleuten/vuex-persistedstate: 💾 Persist and rehydrate your Vuex state between page reloads.