vuex 저장 후, 새로고침 시

참고로 저는 아래와같이 사용한답니다

먼저 npm i vuex-persistedstate  로 설치해주시고

아래와 같이 폴더 구성합니다.

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

import userStore from './modules/userStore.js';

const store = new Vuex.Store({
  modules: {
    userStore: userStore,
  },
  plugins: [createPersistedState()],
});

export default store;

store/modules/userStore.js

const userStore = {
  namespaced: true,
  state: {
    username: '',
  },
  getters: {
    GET_USER_NAME: state => state.username,
  },
  mutations: {
    SET_USER_NAME: (state, payload) => {
      state.username = payload.username;
    },
  },
  actions: {
    SET_USER_NAME({ commit }, payload) {
      commit('SET_USER_NAME', payload);
    },
  },
};

export default userStore;

위와같이 사용하면 영구 저장 되지만, 반대로 초기화가 필요할 때  초기화 되지 않는 문제도 생깁니다.

그러므로 저는 초기 불러올 때 (예: created 훅) 에서 state를 초기화 시켜주는식으로 사용합니다.

js-cookie와의 연동도 함께 찾아보시면 좋을거같아요

위 키워드로 검색해보시면 원하시는 답변 얻을 수 있을 것 같아요

안녕하세요 qkrthfk님, 강의에서 다룬 내용은 싱글 페이지 애플리케이션을 개발할 때의 일반적인 개발 방식입니다. Vuex는 자바스크립트 레벨에서 데이터를 취급하기 때문에 페이지를 새로 고침하면 값이 사라집니다. Vuex를 브라우저 저장소의 개념으로 바라보시는 것보다 뷰 컴포넌트 간의 동일한 데이터를 취급하기 위한 도구로 봐주시는 게 좋을 것 같아요 :)