FreeVue-Hug

Vue.js를 이용하여 프론트개발을 시작하니 상태관리는 Vuex를 선택했습니다. 지금까지 Vuex를 활용한 방법은 유저정보와 Auth, 사이트 설정 등 기본적인 부분에만 사용했습니다.

페이지가 늘어나고 각각의 페이지가 가지는 State의 양이 많아지니 관리포인트가 많아졌습니다. 그래서 Vuex를 활용하여 관리를 하기 시작했습니다.

/* store/index.js */

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    Auth: {
      // 로그인 및 회원정보
    },
    Snack: {
      // 알림창 상태
    },
    Confirm: {
      // 확인창 상태
    },
  },
  mutations: {},
  getters: {},
})

export default store

가장 기본적인 세팅을 사용했습니다. 하지만 하나의 파일에 너무 많은 양의 소스가 들어가니 관리가 어려워졌습니다. 그래서 기능별로 나누기 시작했습니다.

/* store/Auth.js */

const AuthStore = {
  state: {},
  mutations: {},
  getters: {},
  actions: {},
}

export default AuthStore

/* store/index.js */

import Vue from 'vue'
import Vuex from 'vuex'
import Auth from './Auth'
import Snack from './Snack'
import Confirm from 'Confirm'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    Auth,
    Confirm,
    Snack,
  },
})

Vuex에서 지원해주는 modules를 사용하기 시작했습니다. 각각의 기능별로 Store을 나누어 관리하기 시작했습니다.

기능별로 나누고 각각의 API을 actions에 담기 시작했습니다.

Vuex modules 활용기