VueJS 中全局可用的 mixin

Question

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

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

我希望能够在我的个人 .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 is not defined" 错误。

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

Answer 1

几个想法：

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

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

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

Answer 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)

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

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

Answer 3

这是在 app.js

中全局注册 mixin 的正确方法

 Vue.mixin(myMixin);

VueJS 中全局可用的 mixin

Globally-available mixin in VueJS

ecmascript-6

webpack

vue.js

es6-module-loader