VueJS 中全局可用的 mixin答案

【问题标题】：Globally-available mixin in VueJSVueJS 中全局可用的 mixin
【发布时间】：2016-07-29 04:24:44
【问题描述】：

我正在尝试创建一个全局可用的 mixin，但不会自动注入到每个组件中。即我不想要这个：Vue.mixin({...});

我根据these 说明设置项目。 This 是我的项目结构。我还有assets/js/mixins.js 文件，其中包含我的mixin。

我希望能够在我的个人 .vue 文件中执行此操作（我的许多组件使用 myMixin，但不是全部）：

<script>
export default {
    mixins:[myMixin],
    data:{....}
}
</script>
<template>
  <!-- some template code -->
</template>

到目前为止，唯一的方法是将此行添加到需要它的每个组件的顶部：

import {myMixin} from './assets/js/mixins.js"

但是有没有办法做到这一点并让myMixin 变量在全球范围内可用？我已经尝试将它包含在 main.js 和 app.vue 中，但如果我尝试在任何子组件中使用 myMixin，我仍然会收到“myMixin 未定义”错误。

或者是否有另一种方法来注册一个不需要我在每个组件中输入mixins.js 文件的路径的mixin？

【问题讨论】：

这不是一个好主意。使用捆绑器和模块的原因之一是防止使用全局变量。我们付出的代价是编写导入语句，这是有充分理由的。你总是知道你的模块依赖来自哪里，而不必猜测你在哪里引入了 this 全局或 that 一个。

标签： ecmascript-6 webpack vue.js es6-module-loader

【解决方案1】：

这是在 app.js 中全局注册 mixin 的正确方法

 Vue.mixin(myMixin);

【讨论】：

我在问题的第二行中确实说过这不是我想要的......
无论如何，这对我帮助很大...+1

【解决方案2】：

我建议将您的 mixin 设置为插件。为此，请将其包装在函数调用 install 中并导出 install 函数。然后，无论你在哪里实例化你的应用，你都可以简单地使用 Vue.use(yourMixin):

文档：

https://vuejs.org/guide/plugins.html

http://vuejs.org/api/#Vue-mixin

例子：

//- build your mixin
const mixin = {
  // do something
}

//- export it as a plugin
export default {
  install (Vue, options) {
    Vue.mixin(mixin)
  }
}

//- make it globally available
import myMixin from './myMixin'
Vue.use(myMixin)

安装 fn() 中的 Vue.use 调用，因此所有后续的 Vue（或所有如果尚未创建）都具有 mixin 功能

注意全局可用的 mixin 上的命名空间冲突 (!)

【讨论】：

我不确定这是否有效，因为我注意到这个答案来自 2016 年，但它似乎不再起作用了。（目前使用 Vue 版本 2.6.14）上面似乎仍然将我的 mixins 全局注入到所有组件中。相反，就像在问题中一样，我只是希望能够在不导入 mixin 的情况下调用它

【解决方案3】：

几个想法：

在 main.js 中，您可以声明 window.myMixin = {...}，我相信它可以在之后加载的任何组件中使用。

编辑：如果您使用this.myMixin，这会更好，因为this 将引用全局范围。这样你就不会依赖现有的window，所以它可以在更多的环境中使用

为了不必在每个文件中声明完整路径，您可以按照Installing a local module using npm? 将 mixin 创建为本地 NPM 模块。然后你可以import myMixin from 'myMixin'。我认为这将是更合适的方法，这样您仍然可以在每个组件中加载依赖项，只需使用一些速记。

【讨论】：