Dalam Nuxt 3 bagaimana untuk menetapkan baseUrl API global yang digunakan dalam useFetch

Question

Bagaimana untuk menetapkan baseUrl yang digunakan dalam useFetch composable global (mungkin nuxt.config.ts)?

Bagaimana untuk mengelakkan mentakrifkannya dalam setiap penggunaanFetch?

Answer 1

Anda boleh nuxt.config.js|ts 中定义 baseURL di

seperti yang ditunjukkan di bawah:

import { defineNuxtConfig } from 'nuxt'

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

(atau gunakan nilai tetap atau hanya pembolehubah persekitaran - bergantung pada pilihan anda)

dan tambah kompos ini:

// /composables/useMyFetch.js

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

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

Jika anda mahukan keselamatan jenis, anda boleh mencapainya seperti ini:

// /composables/useMyFetch.ts

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

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

useMyFetch 作为 useFetchKemudian anda boleh menggunakan penggantian untuk - tetapi tetapkan baseURL :-)🎜