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

Posted 2023-02-22

【中文标题】Vue.js 以特定方式自动注册 Vuex 模块

【英文标题】：Vue.js Auto register Vuex modules in a specific way

【发布时间】：2020-07-20 11:02:51

【问题描述】：

我刚开始使用 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;

非常感谢您。

【问题讨论】：

你试过的有什么问题？有效吗？

你试过file.replace(/(^\.\/modules\/)|(\/index\.js$)/g吗？

【参考方案1】：

据我所知，问题在于使用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;