有没有更好的方法或在 vue.js 中导入 mixins答案

【问题标题】：Is there any better way or importing mixins in vue.js有没有更好的方法或在 vue.js 中导入 mixins
【发布时间】：2021-09-23 08:07:15
【问题描述】：

我在我的项目中创建了许多 mixin，现在我要做的是将所有 mixin 导入 mixins/index.js 文件以及任何需要的组件或页面中，我只需从 mixins/index.js 导入这些 mixin。

现在我怀疑我是否会导入所有不需要的 mixins 还是只导入我使用的 mixins 文件？

假设我在 mixins/index.js 中创建和导入了这些 mixim

import a from 'mixins/a.js'
import b from 'mixins/b.js'
import c from 'mixins/c.js'
import d from 'mixins/d.js'
import e from 'mixins/e.js'

export {
  a,
  b,
  c,
  d,
  e
}

现在让我在我的'x' components 中说我将导入'a' mixins。

import { a } from 'mixins/index.js'

export default {
  mixins: [a]
}

在这种情况下，我的'x' components 中只需要'a' mixins，但由于我是从mixins/index.js 导入的，我拥有所有mixin 的所有静态导入，这是否也会加载不需要的mixins？

【问题讨论】：

答案是否取决于设置。它不应该加载未使用的 mixin，但它可以。
@EstusFlask 你能解释一下在什么情况下它也可以加载所有不需要的 mixin 吗？什么设置会导致这种情况发生？现在我正在研究nuxt js，所有配置都是默认设置，设置中没有什么特别的。
这取决于 Nuxt 内部使用的 Webpack 设置。我希望它没问题，但这不是可以保证的。影响这一点的东西称为摇树。如果出现问题，未使用的东西最终会在捆绑包中。 Tree Shaking 通常只发生在 prod 构建中，因此您可以期望 dev 构建很大，原因有很多，包括这个。
知道了感谢您分享信息。

标签： javascript vue.js mixins

【解决方案1】：

import { a } from './mixins' 将只导入请求的模块，但如果你这样做：

import * as mixins from './mixins'

然后

mixins:[mixins.a]

这将按照here 的说明导入所有模块

【讨论】：

对不起，我认为我在代码中犯了一点错误，它应该是从'mixins/index.js'而不是'minxins/a.js'导入的
我解决了这个问题，而且你应该有一个类似 ./mixins 或 ../mixins 的路径
所以这意味着我可以使用我提到的方式对吗？在 mixins/index.js 中使用 import 并且只使用我在组件中需要的 mixins，在这种情况下它只会加载需要使用的 mixins 对吗？
非常感谢@Boussadjra Brahim
import * as mixins 将只导入正在使用的对象，它与import { a } 的工作方式没有什么不同，至少在摇树工作正常且不直接使用mixins 对象的情况下.

【解决方案2】：

您可以这样做，导入所有 minmins 文件，然后将您的 minmin 文件导出到索引中，如下所示：

index.js

import a from '../mixins/a.js'
import b from '../mixins/b.js'
import c from '../mixins/c.js'
import d from '../mixins/d.js'
import e from '../mixins/e.js'

export {a, b, c, d, e}

然后在你的组件中，你可以通过这种方式导入索引中导出的特定模块：

x 组件

import {a, b} from "../mixins"

这样你只导入你需要的，而不是所有的index.js模块

【讨论】：