vite+vue3搭建的工程实现批量导入store的module
作者：♂♀放纸鸢
这篇文章主要介绍了vite+vue3搭建的工程实现批量导入store的module方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vite+vue3搭建的工程批量导入store的module
src\store文件夹下index.ts
import { createStore } from 'vuex'
const modulesFiles = import.meta.glob('./modules/*.ts', { eager: true })
const modules: any = {}
for (const path in modulesFiles) {
const moduleName = path.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
modules[moduleName] = (modulesFiles[path] as any).default
}
const store = createStore({
modules
})
export default store问题的关键
是如何引入模块内的文件
const modules = import.meta.glob('./dir/*.js', { eager: true })一开始没加第二个参数，一直都是动态加载，创建完了store模块才被附上值，然后改为这样的写法
const modulesFiles = import.meta.globEager('./modules/*.ts')但是globEager的写法已经废弃，强迫症发作一定要改
如下图：
但是可以点击去查看
官网上也有解释
匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。
如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用）
你可以传入 { eager: true } 作为第二个参数
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。