[Vue.js] state값 새로고침되도 값 유지되도록 하기(vuex-persistedstate )

먼저, 내가 구현하고싶은것

• backend에서 응답받은 sessionid를 vuex를 사용해서 state에 sessionid를 저장시켜준다. 그리고 페이지가 이동되도 (새로고침이 되도) state값에 있는 sessionId가 그대로 유지 되도록!

 

 

테스트를 먼저 해본다.

 

1. 로그인버튼 눌렀을때 sessionid가 저장되도록

 

• store

//state
sessionId : ""

//mutaion
changeSession(state){
      state.sessionId = "12345678"
    },


//actions
changeSession( {commit} ) {
      commit('changeSession');
    },

 

• view

this.$store.dispatch('loginStore/changeSession')
        .then(() => {
          alert('로그인에 성공하였습니다.')
            this.$router.push('/main');
        })

 

2. 페이지 이동시 state값이 유지가 되는지 테스트

 

• view

// template
 sessionId : {{ sessionId }}
 
 
// script - mounted()
data( sessionId )
this.sessionId = this.$store.state.loginStore.sessionId;

 

▼

 

 

 

새로고침을 하지 않는 이상 값이 유지가 잘 되긴된다..

근데 내가 원하고자 하는건 새로고침을 해도 없어지지 않아야한다................... 어떻게 해야할까?

 

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

vuex-persistedstate

사용하면 유지를 할수있다고 한다 (?)

이게 무엇이냐하면

vuex에 저장되는 값(State)들을 사용하는 웹 브라우저의 LocalStorage에 저장하여,

새로고침 시에도 해당 로컬스토리지의 값은 없어지지 않기 때문에 해당 값을 가져와 동기화시켜주는 역할을 한다고 한다.

 

 

 

• 1) 설치

npm install --save vuex-persistedstate

 

• 2) 플러그인추가

index.js

import Vue from 'vue';
import Vuex from 'vuex';

import testStore from '@/store/testStore';
import joinStore from '@/store/joinStore';
import loginStore from '@/store/loginStore';
import listStore from '@/store/listStore';

import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  strict: true,
  modules: {
    testStore,
    joinStore,
    loginStore,
    listStore,
  },
  plugins: [
    createPersistedState({
      paths: [loginStore]
    })
  ]
});

이 소스에서 추가된 부분은

import createPersistedState from 'vuex-persistedstate';

 

  plugins: [
    createPersistedState({
      paths: [loginStore]
    })

 

이 두가지!

 

*** 원래 기본문법은

plugins: [
    createPersistedState();
  ]

요런식으로 생겼지만 이렇게 되면 모든 store의 state값들이 localstorage에 저장이되버린다 = 과부하 생길수있음......

그래서 paths로  유지시키고자하는 특정 store만 적용되게 해주면 된다.

 

 

 

• 3) 적용확인

새로고침 해도 유지가 아주 잘 되는 모습

 

 

localStorage에 어떻게 담겼는지도 학번 확인해봤다