如何在 NUXT 中设置调用 Apis 的全局函数？

Question

经过一些 google 搜索后，我在 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 未定义”

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

Answer 1

我实际上 re-read 你的回答是因为我有点困惑。

因此，在您的 callApi.js 中，您在那里定义了您想要的内容，但是您在实际定义 callApi 的文件中调用了 Vue.use(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 文件中设置插件属性的插件路径（完全按照您的方式），将自动调用 callApi 文件（尝试将控制台登录您的 callApi 文件，您将在启动应用程序时看到它的日志记录。

你想要的例子：

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

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

对于最后一个选项，您可能想在此处查看：

祝你好运！

如何在 NUXT 中设置调用 Apis 的全局函数？

how can I set a global function for call Apis in NUXT?

api

global

function

vue.js

nuxt.js