在 Vue.js 中包含全局函数

Question

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

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

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

原文由 Jordy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

[来自 vuejs 文档]

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

原文由 Justin MacArthur 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有一个文件，其功能类似于 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)

原文由 Андрей Шарунов 发布，翻译遵循 CC BY-SA 4.0 许可协议