如何在 Nuxt 3 中全局设置 `useFetch` 的 `baseUrl`？

在 Nuxt 3 中全局设置 useFetch 的 baseUrl

概述

Nuxt 3 中的 useFetch composable 非常有用，它使我们能够轻松地从 API 获取数据。但是，如果我们的应用程序有多个组件使用相同的 API 端点，那么在每个 useFetch 调用中指定 baseUrl 会很繁琐。本文将介绍如何全局设置 baseUrl，以简化开发并提高代码一致性。

在 nuxt.config 中设置

一种方法是在 nuxt.config 文件（.ts 或 .js）中设置全局 baseUrl：

// nuxt.config.ts
export default defineNuxtConfig({
  publicRuntimeConfig: {
    API_BASE_URL: 'https://my-api.com/api',
  },
})

这将确保在每次请求中都使用相同的 baseUrl。

在 useFetch 中使用

设置了全局 baseUrl 后，我们可以在 useFetch 调用中省略 baseUrl 选项：

// components/MyComponent.vue
<script>
import { useFetch } from 'nuxt/app'

export default {
  setup() {
    const fetchApi = () => {
      const { data } = useFetch('/users')
      // ...
    }

    return {
      fetchApi,
    }
  },
}
</script>

Nuxt Bridge 模式

对于 Nuxt Bridge 模式，设置方式如下：

// nuxt.config.js
module.exports = {
  publicRuntimeConfig: {
    API_BASE_URL: 'https://my-api.com/api',
  },
}

优点

全局设置 baseUrl 有以下优点：

• 代码简洁性： 无需在每个 useFetch 调用中重复指定 baseUrl。
• 一致性： 确保应用程序中使用相同的 baseUrl，避免因不一致而导致错误。
• 易于维护： 在需要更新 baseUrl 时，只需在 nuxt.config 中进行一次修改。

结论

通过在 Nuxt 3 中全局设置 useFetch 的 baseUrl，我们可以简化开发流程，提高代码的可读性和一致性，从而更好地管理应用程序中的 API 端点。

常见问题解答

1. 为什么在 Nuxt 3 中设置全局 baseUrl 是个好主意？
   因为它可以简化代码，提高一致性并简化维护。
2. 我可以在哪里设置全局 baseUrl？
   在 nuxt.config 文件中，.ts 或 .js。
3. 在 useFetch 调用中如何使用全局 baseUrl？
   无需手动指定 baseUrl，Nuxt 3 会自动使用全局设置。
4. Nuxt Bridge 模式中如何设置全局 baseUrl？
   在 nuxt.config.js 文件中设置。
5. 全局设置 baseUrl 有哪些优点？
   代码简洁性、一致性和易于维护。