vue入门(二)vuex动态导入依赖

vuex下利用 require.context()动态加载依赖

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

import getters from './getters'

Vue.use(Vuex)
const modules={}

/**
 * 遍历-./modules目录下的所有js文件，自动组装modules
 * 例如：下的文件结构如下所示
 * ./modules/user.js
 * ./modules/xxx/Page.js
 * 输出结果为:
 * modules={
 * user,
 * Page
 * }
 * 注意事项
 * 依赖js文件名，js文件名不能重复，需要时唯一的
 */
const modulesFiles = require.context('./modules', true, /\.js$/)
modulesFiles.keys().forEach(key => {
  //截取名字
  const moduleName=key.replace(/(.*\/)*([^.]+).*/ig,"$2");;
  //通过 context(key)导出文件内容。在文件中时通过 export.default 导出的，所以后边加.default
  const fileModule = modulesFiles(key).default;
  //TODO namespaced-命名空间属性此处不能为true，还未闹明白待优化
  //
  modules[moduleName] = {
      ...fileModule,
      //namespaced: true,  
  };
});

const store = new Vuex.Store({
  modules: modules,
  getters
})
export default store