vue - 自动化模块批处理

store 模块化引入

传统引入

import Vue from 'vue';
import Vuex from 'vuex';
import module1 from './modules/modules1';
import module2 from './modules/modules2';
......
import modulesN from './modules/modulesN';

Vue.use(Vuex);

const modules = {
    module1,
    module2,
    ...,
    moduleN
}

export default new Vuex.Store({
  modules,
  getters: {
    initRouterState: (state) => state.router.initRouterState,
  },
});

自动引用

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

Vue.use(Vuex);

const modulesFiles = require.context('./modules', true, /\.js$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

export default new Vuex.Store({
  modules,
  getters: {
    initRouterState: (state) => state.router.initRouterState,
  },
});

组件

目录结构

.
├── components
│   ├── component1.vue
│   ├── component2.vue
│   ├── ...
│   ├── componentN.vue
│   └── index.js
│ 
└── demo.vue

批量导出（暴露）

// /components/index.js
const dialogs = require.context('./components', true, /\.vue$/);

const modules = dialogs.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
  module.exports[moduleName] = dialogs(modulePath).default;
  return modules;
}, {});

使用

1. 批量导入组件
2. 批量引用组件
3. 批量执行事件

// /demo.vue

注意

1. 命名：文件的导出和引入依赖文件名，与文件名一致