vue中如何优雅的自动注册vuex的子模块

之前我们是这么注册vuex模块的

/* index.js */
// 引入modules文件夹下的文件
import alarm from './modules/alarm';
import history from './modules/history';
import factory from './modules/factory';
import contact from './modules/contact';
import company from './modules/company';
import deviceManage from './modules/device-manage';
import deviceModel from './modules/device-model';
import deviceActivation from './modules/device-activation';
import user from './modules/user';
import role from './modules/role';
import setAlarm from './modules/setAlarm';
import factoryMode from "./modules/factoryMode";
import ScreenDeviceWatch from './modules/screen-device-watch';
import ScreenDeviceForecast from './modules/screen-device-forecast';

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use( Vuex );

const store = new Vuex.Store( {
    state: {},
 	getters: {},
 	mutations: {},
 	actions: {},
 	modules: {
 	    namespaced: true,
 	    alarm,
 	    history,
 	    factory,
 	    contact,
 	    company,
 	    deviceManage,
 	    deviceModel,
 	    deviceActivation,
 	    user,
 	    role,
 	    setAlarm,
 	    factoryMode,
 	    ScreenDeviceWatch,
 	    ScreenDeviceForecast
 	}
} );

export default store;

可以发现每个模块都要我们手动导入，然后加入到 module 里面，如此重复。当模块不多还好，假如项目大了，有50个模块，那就得要做很多重复的工作。现在我们可以利用 require.context 来实现自动注册。

/* index.js */

/**
 * 读取./modules下的所有js文件并注册模块
 */
const requireModule = require.context('./modules', false, /\.js$/)
const modules = {}
 
requireModule.keys().forEach(fileName => {
 	const moduleName = fileName.replace(/(\.\/|\.js)/g, '') 
	modules[moduleName] = {
  		namespaced: true,
  		...requireModule(fileName).default
 	}
})

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use( Vuex );

const store = new Vuex.Store( {
    state: {},
 	getters: {},
 	mutations: {},
 	actions: {},
 	modules
} );

export default store;