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;
}, {});
使用
- 批量导入组件
- 批量引用组件
- 批量执行事件
// /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>
注意
- 命名:文件的导出和引入依赖文件名,与文件名一致
Lee2