Dans Nuxt 3, comment définir l'API globale baseUrl utilisée dans useFetch

Question

Comment définir la baseUrl utilisée dans le composable useFetch global (probablement nuxt.config.ts) ?

Comment éviter de le définir à chaque utilisationFetch ?

Answer 1

Vous pouvez nuxt.config.js|ts 中定义 baseURL à

comme indiqué ci-dessous :

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL || 'https://api.example.com/',
    },
  },
  // ...

(ou utilisez des valeurs fixes ou simplement des variables d'environnement - selon vos préférences)

et ajoutez ce composable :

// /composables/useMyFetch.js

export const useMyFetch = (request, opts) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

Si vous souhaitez une sécurité de type, vous pouvez y parvenir comme ceci :

// /composables/useMyFetch.ts

export const useMyFetch: typeof useFetch = (request, opts?) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

useMyFetch 作为 useFetchEnsuite, vous pouvez utiliser le remplacement pour

- mais définissez la baseURL :-)🎜