vue - 自动化批处理

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
<template>
  <div class="layout_main">
    <!-- 批量引用组件 -->
    <component v-for="(v, i) in DialogsKeys" :key="v" :ref="v" :is="v" />
  </div>
</template>
<script>
import Dialogs from '@/components';
const DialogsKeys = Object.keys(Dialogs);
export default {
  name: 'Demo',
  components: {
    // 批量导入
    ...Dialogs
  },
  data() {
    return {
      DialogsKeys
    };
  },
  methods: {
    // 批量执行事件 
    openDialog(refName) {
      this.$refs[refName]
        ? this.$refs[refName][0].open() // 需在模块组件内定义相同命名的入口方法
        : this.$message.warning(refName + '组件未引入');
    },
  },
};
</script>

注意

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