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

Posted 2023-02-22

【中文标题】有没有更好的方法或在 vue.js 中导入 mixins

【英文标题】：Is there any better way or importing mixins in vue.js

【发布时间】：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 构建很大，原因有很多，包括这个。

知道了 感谢您分享信息。

【参考方案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模块