Intro

앞서 만든 TodoList는 새로고침을 하면 기껏 할일 추가해놔도 사라져 버렸어요.

vue-persistedstate 플러그인을 사용하면 이를 해결할 수 있어요.

🔵 vue-persistedstate

localstorage를 이용하여 state를 유지하는 플러그인

개념

vuex-persistedstate는 state에 저장딘 변수와 값을 그대로 웹브라우저의 localstorage에 업데이트를 해줍니다. 이후 렌더링 될 때 localstorage에 있는 내용을 `state에 다시 동기화 시킵니다.
그런데,
state의 변수를 너무 많이 사용하게 되면 프로그램의 성능이 떨어지는 단점이 있기 때문에 필요한 변수만 선택해서 저장하는 게 좋습니다.

활용

npm i --save vuex-persistedstate

store/index.js

import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  //...
  
  plugins: [
    createPersistedState(),
  ]
})

선택한 모듈만 사용하기

import createPersistedState from "vuex-persistedstate"
import moduleName from './moduleName'
Vue.use(Vuex)

export default new Vuex.Store({
  //...
  
  plugins: [
    createPersistedState({
      paths:['moduleName'],
    })
  ]
})

추가

쿠키나 세션에 저장하는 방식도 있어요. 공식문서를 보고 난중에 공부해볼게요.