Vue. js Автоматическая регистрация модулей Vuex заданным c способом - PullRequest
Новая
       38

Vue. js Автоматическая регистрация модулей Vuex заданным c способом

3 голосов
/ 08 апреля 2020

Я только начал с Vue. js и пытаюсь использовать Vuex. У меня есть следующая структура внутри моего каталога: src/store/

store
├── index.js
└── modules
    ├── app
    │   └── index.js
    └── auth
        └── index.js

В каждом модуле у меня есть только один файл с именем index.js, и в этих файлах я определяю getters, actions, mutations, etc каждого модуля.

У меня следующий вопрос: как я могу автоматически зарегистрировать все эти модули в файле src/store/index.js, не регистрируя их по одному. Это станет утомительной задачей по мере роста моего приложения. Мне также нужно, чтобы, когда каждый из этих модулей самостоятельно регистрировался, самоопределялось свойство namespaced: true

Что я пробовал до сих пор: 


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

Vue.use(Vuex);

const context = require.context('./modules', true, /index.js/); //only files with the name index.js

const modules = context.keys()
  .map(file => [file.replace(/(^.\/)|(\.js$)/g, ''), context(file)])
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true;
    }

    return { ...modules, [name]: module };
  }, {});

const store = new Vuex.Store({
  modules: modules
});

export default store;

Большое спасибо заранее.

1 Ответ

1 голос
/ 09 апреля 2020

Из того, что я могу понять, проблема заключается в сопоставлении модулей с context(file). Для экспорта по умолчанию я добился успеха с context(file).default, отступив на context(file), если это не определено. Я также не вижу, чтобы вы убирали часть '/index' из пути к каталогу вашего файла.

Использование Reduce делает код более сложным, чем нужно, ИМХО. Вы можете так же легко сделать это с помощью метода forEach: 

const context = require.context('./modules', true, /index.js/);
const modules = {};

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

  // create the module name from file
  const moduleName = file.replace(/(\.\/|\/index.js)/g, '');

  // register file context under module name
  modules[moduleName] = context(file).default || context(file);

  // override namespaced option
  modules[moduleName].namespaced = true;
});

const store = new Vuex.Store({
  modules, // ES6 shorthand for modules: modules
})

export default store;
...