Vuex Store 모듈 관리

 

 

Vuex Store 모듈을 쉽게 관리하는 방법

 

예전에는 Store를 하나 추가한다고 하면, modules 폴더 안에 store.js 파일을 추가하고, 

store 폴더 안에 있는 index.js에 추가한 스토어.js를 추가해줘야했다. 

 

어려운 작업은 아니나, 귀찮은 작업임은 맞고 언젠가 이런 부분에 대해 리팩토링이 필요하다 생각했다.

그래서 알아보니, 이미 아래와 같이 사용하는 코드가 있었다. 

 

// modules 폴더 안에 index.js

import camelCase from 'lodash/camelCase';

// 현재 폴더안에 js 파일을 모두 찾는다. 
// 하위 폴더는 없기 때문에 false로 설정.
const requireModule = require.context('.', false, /\.js$/);

const modules = {};

// 여기서 keys()는 Objecy.keys가 아닌 커스텀된 keys()로 추정이 된다. 
requireModule.keys().forEach(filename => {
  const isIndexJsFile = filename === './index.js';
	// index.js는 추가되면 안되기 때문에 해당 로직 추가
  if (!isIndexJsFile) {
  // 카멜케이스로 치환
    const moduleName = camelCase(filename.replace(/(\.\/|\.js)/g, ''));
   // 네임스페이스를 true로 해주면, 스토어 파일에서 해주지 않아도 자동으로 설정된다. 
    modules[moduleName] = { namespaced: true, ...requireModule(filename) };
  }
});

export default modules;

 

굉장히 편리하다. modules 안에 index.js를 위와 같이 설정해두면 store index.js 파일은 굉장히 간결해진다.

 

import Vue from 'vue';
import Vuex from 'vuex';
import modules from './modules';

Vue.use(Vuex);

export default new Vuex.Store({
  modules,
  strict: process.env.NODE_ENV !== 'production',
});

 

깔끔해졌다. 이 기능을 지금까지 몰랐다니... 후회가 된다