[Issue__vuex] 새로고침 후에 Vuex store의 state가 초기화되는 현상 해결

Issue: vuex state 초기화

🐂 Issue: 새로고침 후에 Vuex 상태 유지 x

🧾 로그인 후, 관련 데이터를 vuex의 state에 저장하려는 상황
로그인 후에 얻은 🪙 accessToken을 vuex store state에 저장하고 페이지 접근 권한을 따질 때 사용하려 했지만,
새로고침이나 페이지 이동 시, 🐖 state 값이 초기화되는 문제에 직면

🪶 새로고침을 하면 vue 인스턴스가 소멸했다가 다시 생성되는 vue의 라이프사이클 때문에 발생

resolve: vuex-persistedstate 라이브러리

🐃 resolve: vuex-persistedstate

npm install --save vuex-persistedstate

vuex store의 state에 저장된 값을 웹브라우저의 🥟 localStorage에 저장한다.
이렇게 하면 새로고침을 해도 사라지지 않기 때문에, 로딩 시 🥟 localStorage에 있는 값을 state에 다시 동기화 시켜준다.

다만, vuex store에 있는 모든 state값을 🥟 localStorage에 저장하게 되면,
성능이 크게 떨어질 수 있다. 따라서, vuex store를 모듈화하여 localStorage에 저장할 모듈만 path에 등록시키면 해당 성능문제의 영향을 줄일 수 있다.

---

🐝 store.js

vuex store 모듈화

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  modules: {
    user: userStore,
    product: productStore
  },
  plugins: [
    createPersistedState({
      paths: ["user"]
    })
  ]
});

export default store;

modules 이라는 옵션을 통해 모듈을 등록하는데, 등록되는 방식을 보면
각 모듈이 단순한 객체 형태여야 한다.

🐝 userStore.js

vuex store의 각 모듈, 단순한 객체 형태

const userStore = {
    namespaced: true,
    state: () => ({
        accessToken: '',
    }),
    mutations: {
        setAccessToken(state, accessToken) {
            state.accessToken = accessToken;
        },
    },
    actions: {
        login({ commit }, accessToken) {
            commit('setAccessToken', accessToken);
        },
    },
    getters: {
        isAuthenticated(state) {
            return !!state.accessToken;
        }
    }
};

export default userStore

createStore는 애플리케이션 전체의 중앙 스토어 인스턴스를 한번만 생성할 때 사용하는 함수이고,
vuex에서 모듈을 정의할 때는 각 모듈이 state, mutations, actions, getters 속성을 가지는 단순한 객체로 정의한다.

🍪 state를 화살표 함수로 작성한 이유는 모듈의 state가 독립적인 인스턴스로 유지되도록 하기 위해서이다.

state를 객체로 작성하면 해당 모듈이 여러 인스턴스로 사용될 때, 🐖 모든 인스턴스가 동일한 객체를 공유하게 된다.
하지만 화살표 함수로 작성하면 각 인스턴스가 함수 호출로 새로운 객체를 생성하게 되어 상태 공유를 방지할 수 있다.

---

🐝 main.js

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store/store";

const app = createApp(App);
app.use(store);
app.mount("#app");

이렇게 설정해 놓으면 새로고침이나 페이지 이동에도 vuex store의 state가 초기화되지 않는다.

모듈화된 store 호출법

🍝 모듈화된 store 호출법

• this.$store 호출법

  $: vue instance property를 나타내는 관례

  this.$store.dispatch("MODULE_NAME/ACTIONS_NAME", ARGS);
  

• import 식별자 호출법

  import store from './store/store'

  store.getters["MODULE_NAME/GETTERS_NAME"];
  

• 헬퍼함수 호출법

  🍍 vuex의 각 속성들을 더 쉽게 사용할 수 있게 하는 함수

  ...mapState('MODULE_NAME', ['STATE_NAME']);