Vuex 모듈 state 깔끔하게 초기화하는 방법 (Reset Vuex Module State)

Vuex 모듈 state 깔끔하게 초기화하는 방법 (Reset Vuex Module State)

들어가기 전에

Vue 라이브러리로 서비스를 개발하다 보면 Vuex라는 상태 관리 도구를 사용하곤 합니다. Vuex는 애플리케이션의 상태 값을 하나의 객체로 관리할 수 있습니다. 하지만 서비스의 규모가 커지면 커질수록 모든 상태 값들을 단일 상태 객체 안에 넣고 관리하는 것은 굉장히 비효율적입니다. 이럴 경우 Vuex의 모듈(Modules) 컨셉을 사용하곤 하는데요. 이때 모듈에서 사용하고 있는 상태 값들을 초기화를 해야 될 경우가 생깁니다. 이번 포스팅에서는 Vuex 모듈에서 상태 값을 깔끔하게 초기화하는 방법에 대해서 다뤄보도록 하겠습니다.

예제코드

예시 1) 객체반환 함수로 구현

getDefaultState 함수는 초기 상태 값을 반환하는 함수입니다. 핵심은 getDefaultState 함수가 값을 반환할 때마다 매번 새로운 객체를 반환한다는 점입니다. resetState mutation에서 동일하게 getDefaultState 함수를 사용함으로써 모듈 데이터를 초기화하는데 사용했습니다.

const getDefaultState = () => {
  return {
    items: [],
    status: 'empty'
  }
}
// initial state
const state = getDefaultState()

const actions = {
  resetCartState ({ commit }) {
    commit('resetState')
  },
  addItem ({ state, commit }, item) { /* ... */ }
}

const mutations = {
  resetState (state) {
    Object.assign(state, getDefaultState())
  }
}

export default {
  state,
  getters: {},
  actions,
  mu

예시 2) lodash cloneDeep 메서드로 구현

lodash cloneDeep 메서드를 활용해서 구현할 수 있습니다. lodash cloneDeep은 deep copy를 행하는 메서드로 객체 깊은 복사를 수행합니다. 깊은 복사(Deep Copy)를 하면 원본의 프로퍼티 값이 수정되는 문제를 피할 수 있습니다. 딥카피는 쉽게 말해 객체끼리의 참조를 끊고 새로운 객체를 생성하는 방법입니다.

import cloneDeep from 'lodash/cloneDeep';

const INITIAL_STATE = {
    items: [],
    status: 'empty'
};
// initial state
const state = cloneDeep(INITIAL_STATE)

const actions = {
  resetCartState ({ commit }) {
    commit('resetState')
  },
  addItem ({ state, commit }, item) { /* ... */ }
}

const mutations = {
  resetState (state) {
    Object.assign(state, cloneDeep(INITIAL_STATE))
  }
}

export default {
  state,
  getters: {},
  actions,
  mu

마무리

예시의 공통점은 원본 객체와 다른 새로운 객체 (초기 값)으로 모듈 상태 값을 변경하는 것입니다. 객체 반환 함수나 lodash cloneDeep 메서드 이외에 깊은 복사를 수행하는 코드로도 구현 가능합니다. 기억하세요! 핵심은 원본 객체를 참조하지 않는 새로운 객체로 상태 값을 덮어주는 것입니다.