Как сделать автоматичекую загрузку модулей Vuex

Question

В проекте использую Vue + Vuex. Накопилось много vuex-модулей. Сейчас они все подключабются так:

import { module_1 } from 'Store/modules/module_1';
import { module_2 } from 'Store/modules/module_2';
...
import { module_n } from 'Store/modules/module_n';

Именование модулей и директорий в snake_case.

Как можно это упростить или сделать эту загрузку автоматической?

Answer 1

Для того, чтобы оптимизировать загрузку модулей необходимо:

Определиться со структурой
Собирать проект с помощью Webpack
Воспользоваться функцие webpack - require.context()

Код на JS(Store/index.js):

import Vue from 'vue';
import Vuex from 'vuex';

const modules = {};
const context = require.context('Store/modules', true, /index\.js$/i);
context.keys().map(path => {
  const find = /(?<module_name>\w+)\/index\.js/.exec(path);
  const module_name = find?.groups?.module_name;
  const module = context(path);
  modules[module_name] = module[module_name];
});

Vue.use(Vuex);

const store = {
  modules,
};

export default new Vuex.Store(store);

Код на TS(Store/index.ts):

/**
 * Types
 */
import Vuex, { Module, StoreOptions } from 'vuex';
import { RootState } from './types';

/**
 * Vue
 */
import Vue from 'vue';

interface RootState {}

type ModuleProperty = { [key: string]: Module<object, RootState> };

const modules: ModuleProperty = {};
const context = require.context('Store/modules', true, /index\.ts$/i);
context.keys().map(path => {
  const find = /(?<module_name>\w+)\/index\.ts/.exec(path);
  const module_name: string = find?.groups?.module_name!;
  const module = context(path);
  modules[module_name] = module[module_name];
});

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
  modules,
};

export default new Vuex.Store<RootState>(store);

Воспользуемся структурой указаной в вопросе. Структура имеет вид ./store/modules/{имя_модуля}/index.js(имя директории и модуля в snake_case) или любая другая вложенность. Например: ./store/modules/{директория}/{директория}/{имя_модуля}/index.js
В рамках ответа ожидается, что сборка проекта настроена с помощью webpack.
С помощью функции require.context() найдём все пути индексным файлам модулей.
/(?<module_name>\w+)\/index\.ts/ - вытаскиваем имя модуля
context(path) - экземпляр модуля

Дополнителная информация:

БЛОГ НА HUSL

Как сделать автоматичекую загрузку модулей Vuex

Ответы (1 шт):