vuex前端工程化--request.context()
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,
},
});
更多推荐
已为社区贡献1条内容
所有评论(0)