관심사의 분리

관심사의 분리(Separation of Concerns) 원칙에 따라 스토어의 액션, 뮤테이션, 게터 등을 분리해 관리할 수 있습니다.

스토어의 index.js 파일에서 actions 부분을 제거한 후, 외부에서 불러와 설정되도록 코드를 변경합니다.

// store/index.js

import actions from './actions';
export default new Vuex.Store({
  // ...
  actions,
});

actions.js 파일을 만든 후, 분리된 액션 코드를 별도로 관리할 수 있습니다. 분리된 액션은 shop 객체의 메서드에 접근할 수 있어야 하므로 shop 모듈을 불러와야 합니다.

// store/actions.js

import shop from '@/api/shop';
export default {
  addBookToCart({state, getters, commit}, book) {
    if (!getters.checkOutOfStock(book)) {
      const cartItem = state.cart.find(item => item.id === book.id);
      if (!cartItem) {
        commit('pushBookToCart', book.id);
      } else {
        commit('increamentBookQuantity', cartItem);
      }
      commit('decreamentBookInventory', book);
    }
  },
  purchage({state, commit}) {
    shop.buyBooks(
      state.cart,
      () => {
        commit('emptyCart');
        commit('notifyStatus', '성공');
      },
      () => {
        commit('notifyStatus', '실패');
      }
    );
  },
  fetchBooks({commit}) {
    return new Promise((resolve, reject) => {
      shop.getBooks(books => {
        commit("setBooks", books)
        resolve();
      });
    });
  }
};

NOTE

동일한 방법으로 스테이트, 게터, 뮤테이션 또한 분리 가능합니다.

// store/index.js

import Vue       from 'vue';
import Vuex      from 'vuex';
import state     from  '@/store/state';
import getters   from  '@/store/getters';
import actions   from  '@/store/actions';
import mutations from  '@/store/mutations';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
});

스토어 디렉토리는 다음과 같이 구성됩니다.

  src/store
   ├── index.js
   ├── state.js
   ├── getters.js
   ├── actions.js
   └── mutations.js

# 관심사의 분리

관심사의 분리