Vuex и динамическая регистрация модулей

Если у вас большой проект на 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",});

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