vuex前端工程化--request.context()

项目越来越复杂，Store中modules中的文件也越来越多，在项目的store文件内的modules下有许多的js文件模块，如果用import进行导入的话，比较复杂，要多次导入许多的文件。

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

Vue.use(Vuex);

import user from './modules/user';
import info from './modules/info';
//此处省略N多文件。。。。。

export default new Vuex.Store({
    modules: {
        user,
        info
    },
});

因此可以用webpack的request.context()进行一次性大量导入

 require.context(directory, useSubdirectories = false, regExp = /^.//);

这directory代表的是文件夹路径，如果useSubdirectories为false，代表只改当前文件下，如果为true，还包含子文件内容。

import Vue from 'vue';
import Vuex from 'vuex';
import camelcase from 'camelcase’;    //驼峰命名的一个npm包
Vue.use(Vuex);

const context = require.context('./modules', false, /\.js$/);
    //获取moudules文件下所有js文件；
const moduleStores = {};

context.keys().forEach(key => {
    // context.keys()    返回匹配成功模块的名字组成的数组
    const fileName = key.slice(2, -3);
    //截取名字
    const fileNameInCamelCase = camelcase(fileName);
    //camelcase 是一个驼峰命名包；
    const fileModule = context(key).default;
    //通过 context(key)导出文件内容。在文件中时通过 export.default 导出的，所以后边加.default
    moduleStores[fileNameInCamelCase] = {
        ...fileModule,
        namespaced: true,    //文件中有写可以省略；不过这样写可以不用给每个文件写入；这个属性不知道自己去查文档；
    };
});

export default new Vuex.Store({
    modules: {
        ...moduleStores,
    },
});