Vue.js以特定方式自动注册Vuex模块

Vue.js以特定方式自动注册Vuex模块,vue.js,vuex,vuex-modules,Vue.js,Vuex,Vuex Modules,我刚刚开始使用Vue.js,我正在尝试使用Vuex。我的目录中有以下结构:src/store/ store ├── index.js └── modules ├── app │   └── index.js └── auth └── index.js 在每个模块中,我只有一个名为index.js的文件,在这些文件中,我定义了每个模块的获取程序、操作、突变等 我的问题是:如何在src/store/index.js文件中自动注册所有这些模块,而不必逐个注册

我刚刚开始使用Vue.js,我正在尝试使用Vuex。我的目录中有以下结构:
src/store/

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

在每个模块中,我只有一个名为
index.js
的文件,在这些文件中,我定义了每个模块的
获取程序、操作、突变等

我的问题是:如何在
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;


提前非常感谢。

据我所知,问题在于将模块映射到
上下文(文件)
。对于默认导出,我成功地使用了
上下文(文件)。默认值
,如果上下文(文件)未定义,则返回
上下文(文件)
。我也没有看到您从文件的目录路径中剥离
'/index'
部分

IMHO说,使用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;

你试过什么有什么问题?工作正常吗?您是否尝试过使用
文件.replace(/(^\.\/modules\/)|(\/index\.js$)/g