작성한 질문수 10

1

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

먼저 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와의 연동도 함께 찾아보시면 좋을거같아요

0

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

0

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