Question

一天中的好时光，
我一直试图通过将Vuex存储拆分到许多不同的位置来为应用程序添加“模块化”。

到目前为止，我完全可以通过以下代码加载“本地”模块（在store文件夹内）：

const localRequireContext = require.context('./modules', false, /.*\.js$/);

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

const createStore = () => {
    return new Vuex.Store({
        modules: localModules
    })
};

export default createStore;

但是，我想实现的目标似乎对我来说几乎是不可能的（我不是Web应用程序开发的新手，但实际上从来没有机会体验Node.js的“核心”库， Webpack等）。

我具有以下结构

root
|-assets
|-components
|-config
|-lang
|-layouts
|-libs
|-middleware
|-modules
|----company
|--------module
|-----------store
|--------------index.js (module index)
|-pages
|-plugins
|-store
|----index.js (main index)

所以我想要实现的是进入~/modules文件夹，进入每个company目录（模块的命名空间），打开module目录（模块的名称），导航到store文件夹并导入index.js文件，其内容大致如下：

import module from '../config/module';

export const namespace = [module.namespace, module.name].join('/');

export const state = () => ({
    quotes: null,
    team: null,
    articles: null
});

export const getters = {
    quotes: (state) => state.quotes,
    team: (state) => state.team,
    articles: (state) => state.articles
};

正如我已经说过的，在这些（对我而言）复杂的事情上，我并不是一个“专家”，所以真的很感谢任何帮助！

到目前为止，我走上了“愚蠢的道路”，只是尝试使用以下内容：

const modulesRequireContext = require.context('../modules/**/**/store', false, /.*\.js$/);

但是，不走运- 找不到模块“未定义”

最终文件（在我看来）应如下所示：

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

Vue.use(Vuex);

const localRequireContext = require.context('./modules', false, /.*\.js$/);

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

const modulesRequireContext = require.context('CORRECT_WAY_OF_SEARCHING_IN_SUB_DIRECTORIES', false, /.*\.js$/);

const addedModules = modulesRequireContext.keys().map((file) => [file.replace(/(^.\/)|(\.js$)/g, ''), modulesRequireContext(file)]).reduce((addedModules, [name, module]) => {
    return { ...addedModules, [module.namespace]: module };
}, {});

let modules = { ...localModules, ...addedModules };

const createStore = () => {
    return new Vuex.Store({
        modules: modules
    })
};

export default createStore;

从特定目录内的所有目录加载文件

0 个答案: