如何在 NUXT 中为调用 APIs 设置全局函数？答案

【问题标题】：how can I set a global function for call Apis in NUXT?如何在 NUXT 中为调用 APIs 设置全局函数？
【发布时间】：2020-11-02 03:31:08
【问题描述】：

经过一些谷歌搜索，我在 plugins/callApi.js 中这样做

import axios from 'axios';
import Vue from 'vue';
Vue.use(callApi);

export default async (apiUrl, postData, headers = {}) => {
  let msg = await axios.post(https://my-api-location.com' + apiUrl,postData);
  return msg.data;
};

然后在nuxt.config.js中设置

plugins: [
    '~plugins/callApi.js']

当我想使用它时

const msgData = await callApi('/api/news/getNewsList', postData);
if (msgData.response === 'success') { .......

但是当我启动 yarn dev 时，它会高亮显示“Vue.use(callApi);”部分并说“callApi 未定义”

我怎么解决不了？非常感谢:)

【问题讨论】：

标签： function api vue.js nuxt.js global

【解决方案1】：

我实际上是重新阅读了您的答案，因为我有点困惑。

因此，在您的 callApi.js 中，您定义了您想要的内容，但您在文件中调用 Vue.use(callApi)，您实际上是在该文件中定义 callApi 将是什么。

在编译器转到 Vue.use(callApi) 的那一刻，这个变量“callApi”还没有定义（因为它只有在编译完这个文件后才可用）。

那就去做吧

import axios from 'axios';
import Vue from 'vue';

export default async (apiUrl, postData, headers = {}) => {
  let msg = await axios.post(https://my-api-location.com' + apiUrl,postData);
  return msg.data;
};

然后，通过在 nuxt.config 文件中的 plugins 属性上设置插件路径（完全按照您所做的方式），将自动调用 callApi 文件（尝试在您的 callApi 文件中放置控制台日志，然后您'会在您启动应用程序时看到它记录）。

你想要的一个例子：

https://codesandbox.io/s/nuxt-app-demovue-ssr-forked-s94rz?file=/pages/index.vue

现在在您的插件中，您必须确切地决定您想要做什么。您可能想要公开该功能或使其全球可用，这取决于您！

对于最后一个选项，您可能想看看这里：

Vue/Nuxt: How to define a global method accessible to all components?

祝你好运！

【讨论】：

非常感谢！！让我更了解 Vue.use()