vuex中使用require.context动态引入模块

当要管理的状态比较多，有一定的功能区分的时候，就可以将其拆成几个模块，然后再在index页面内引入。

如果手动去引入的话，就显得不高级，所以这个时候就可以用到webpack的require.context函数做到自动化引入，以后要新增多少模块，都不用再在index文件夹中手动再入加入一遍。

使用require.context()函数创建一个context.
参数：
1、要搜索的目录；
2、标记是否还搜索其子目录，true:搜索子目录，false:不搜索子目录
3、匹配文件的正则表达式。在引入store模块的时候，文件后缀都是.js，所以表达式是/.js$/
如下：

// store文件夹下的index.js文件中写入
const modulesFiles = require.context('./modules',true,/\.js$/)

·注意：·传递给require.context函数的参数，必须是是字面量
这样就可以引入modules文件夹下面的所有js文件，得到一个变量为modules的函数。

modulesFiles是个函数，这个函数有3个属性，分别是：

• resolve，是一个函数，返回模块id；
• keys，函数，返回一个由所有被上面函数表达式处理引入的文件的相对路径组成的数组。
• id,可能在使用module.hot.id的时候用得到。
  modulesFiles还可以接收一个参数，参数内容是相对路径字符串，也就是keys函数返回的内容。返回的是一个es module
  例如

// 定义一个对象，用来存放modules
const modules = {}
// modulesFiles.keys()的输出结果如下：
// ['./app.js', './errorLog.js', './permission.js', './settings.js', './tagsView.js', './user.js']
modulesFiles.keys().forEach(modulePath => {
// modulePath 是文件的相对路径的字符串，如上。所以要想获取模块名字，要用正则表达处理后使用
	const moduleName = modulePath.replace(/\.\/(.*)\.\w+$/,;'$1')
	// 此段正则表达式解析
	// .* .匹配除换行符\n之外的所有单字符，*表示0次或多次
	// \w 匹配任意拉丁字母表中的字母数字字符以及下划线，等价于[A-Za-z0-9_]
	// + 匹配1次及其以上
	// ()和$1，$1表示返回的()中第一次匹配返回的结果。举例这里的返回结果就是模块名字
	const value = modulesFiles(modulePath) // 这里传入的参数是一个相对路径，返回的是一个es module。有两个属性，分别是：default和_esModule。其中default是模块的内容。
	modules[moduleName] = value.default 
)
// 最后，我们要引入的store模块都在modules这个对象里面了，这个时候我们再将其创建成一个store实例
const store = new Vuex.Store({
  modules
})

参考：require.context