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 } 作为第二个参数: