循环 Javascript 导入加载到 VuexORM

Question

每当我有一长串要导入 javascript 的项目时，我的自然意图是将这些项目导出到一个单独的文件中，在我的主 javascript 文件中需要该文件，然后如果它们需要加载到 Vue 或其他进程中，遍历它们并动态加载它们。

我刚刚开始使用 VueORM，需要像这样将 ORM 模型加载到 VueORM 实例中：

import Foo from '@/models/foo'
import Bar from '@/models/bar'

database.register(Foo)
database.register(Bar)

我的应用程序将有几十个模型，所以我想像我提到的那样从一个文件中导出这些模型，然后遍历它们并注册它们。

// main.js


import * as models from '@/models'

Object.keys(models).forEach(key => {
    database.register(model[key])
})

在我的模型中，我将每个模型导出为函数，如下所示：

// models/index.js


export const Foo = () => import('@models/foo')
export const Bar = () => import('@models/bar')

这通常工作正常，但在 VuexORM 中模型没有被加载。

有人可以建议从单独的文件加载这些模型的更好方法吗？

Answer 1

Vuex ORM 不处理动态导入。与其将它们导出为动态导入，不如使用普通的 ESM 语法简单地导出它们？

以下假设您的模型是默认导出的。

// models/index.js

export { default as Foo } from '@/models/foo'
export { default as Bar } from '@/models/bar'

随后，您的 main.js 可以聚合模块：

// main.js

import * as models from '@/models'

Object.values(models).forEach(model => database.register(model))

Loop Javascript Imports to load into VuexORM