在Vue.js中包含全局函数

Question

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

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

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

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

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

Answer 3

Mixin可以全局注册吗？也。https://vuejs.org/v2/guide/mixins.html#Global-Mixin