在 Vue.js 中包含全局函数答案

【问题标题】：Include global functions in Vue.js在 Vue.js 中包含全局函数
【发布时间】：2017-01-15 07:55:48
【问题描述】：

在我的 Vue.js 应用程序中，我想要一些全局函数。例如 callApi() 函数，我可以在每次需要访问我的数据时调用它。

包含这些功能以便我可以在所有组件中访问它们的最佳方式是什么？

我应该创建一个文件 functions.js 并将其包含在我的 main.js 中吗？
我应该创建一个 Mixin 并将其包含在我的 main.js 中吗？
有更好的选择吗？

【问题讨论】：

也许是 Vuex？ vuex.vuejs.org/en/data-flow.html
Vuex 我们主要是为了存储数据，如果我是对的？我不认为它是为了创建全局函数？
我的想法是你“需要访问你的数据”； Vuex 会提供这一点。 Vuex 本身可以进行获取数据的调用。
谢谢。也许我的问题不清楚，对不起。我的意思是全局函数。

标签： javascript vue.js vue-resource vue-component

【解决方案1】：

我有一个文件，其功能类似于 func.js 如下所示

export const func = {
   functionName: (data) => {
      return something  
    }
}

在 main.js 中添加 2 个字符串

import {func} from './func.js'

Vue.prototype.$func = func

如果在下面的脚本标记中，您可以从所有组件中使用

this.$func.functionName(somedata)

或者如果模板标签喜欢

$func.functionName(somedata)

【讨论】：

喜欢这个答案，因为我应该很清楚“什么”和“如何”完成它。

【解决方案2】：

您最好的选择是插件，它可以让您向全局 vue 系统添加功能。

[来自vuejs Docs]

MyPlugin.install = function (Vue, options) {

// 1. add global method or property
Vue.myGlobalMethod = ...

// 2. add a global asset
Vue.directive('my-directive', {})

// 3. add an instance method
Vue.prototype.$myMethod = ...

}

那么你只需添加

Vue.use(MyPlugin)

在调用函数之前在代码中。

Vue.myGlobalMethod(parameters);

或者在你的情况下

Vue.callApi(parameters);

【讨论】：

谢谢。 Mixins 和 Plugins（用于添加全局函数）之间究竟有什么区别？
@Jordy 不同之处在于，对于需要该功能的每个组件，必须在 vm 定义中的 mixin 哈希中包含 mixin。一个插件使它在你的所有组件中全局可用，而不需要包含（因为它扩展了主 Vue 实例，你创建的每个组件都已经包含了这个功能）
@Jordy Tremendus 说得对，Mixins 是单独添加到组件中的有限功能，除非我的大部分组件都需要该功能，否则我通常会使用它。
如何使用 webpack 创建插件？
使用 Nuxt 的过程是一样的吗？

【解决方案3】：

Mixins 也可以在全球范围内注册。 https://vuejs.org/v2/guide/mixins.html#Global-Mixin

【讨论】：