1.引入库

以 Vuex4+ 批量导入store模块为例

假设有如下目录结构

在这里插入图片描述

代码：

import { createStore } from 'vuex'

导入模块

const files = import.meta.glob('./module/*.js')

或者

const files = import.meta.globEager('./module/*.js')

注意，路径需为以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析

import.meta.glob 为过动态导入，构建时，会分离为独立的 chunk

import.meta.globEager 为直接引入

两者在使用上也有不同的区别

1.

const modules = {}
for (const key in files) {
    files[key]().then(res=>{
        modules[key.replace(/(./module/|.js)/g, '')] = res.default
    })
}

Object.keys(modules).forEach(item => {
    modules[item]['namespaced'] = true
})

export default createStore({
    modules,
})

2.

const modules = {}
for (const key in files) {
    modules[key.replace(/(./module/|.js)/g, '')] = files[key].default
}

Object.keys(modules).forEach(item => {
    modules[item]['namespaced'] = true
})

export default createStore({
    modules,
})

如果使用异步导入的方式，会导致一些需要被首先应用的数据无法被获取到，可以根据实际需求，选择不同的导入方式