Если у вас большой проект на Vue.js, то вы, конечно же, используете Vuex для управления состоянием. А если у вас сложная логика в состоянии, то вы, конечно же, разбиваете свой vuex store на модули. И модулей может быть очень много. Импортировать их все руками не очень приятно. Да и при создании нового модуля нужно не забыть подключить его. Всё это складывается в лишние попо-часы, которые никому не нужны. Давайте автоматизируем регистрацию модулей. И тогда всё будет работать само, а мы, как и положено, займёмся творчеством.

Итак, как обычно выглядит среднестатистический файл store.js?

import Vue from 'Vue';
import Vuex from 'Vuex';

import auth from './modules/auth';
import user from './modules/user';

Vue.use(Vuex);

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

Мы сделаем этот файл гораздо компактнее. Нам понадобятся библиотека lodash и уже знакомая по предыдущему посту функция require.context. Создадим файл index.js в папке modules:

import camelCase from 'lodash/camelCase';
const requiredModules = require.context('.', false, /^((?!index|\.unit\.).)*\.js$/);
const modules = {};

requiredModules.keys().forEach(file => {

  const moduleName = camelCase(name.replace(/(\.\/|\.js)/g, '')));

  modules[moduleName] = {
    namespaced: true,
    ...requiredModules[file]
  }
});

export default modules;

И теперь наш store.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",
});

Причём выглядеть так он будет всегда, сколько бы модулей мы ни добавили в проект. И нам больше не нужно беспокоиться, а не забыли ли мы подключить свежесозданный модуль. Полное спокойствие и счастье.