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

Question

Bagaimanakah cara saya menetapkan baseUrl yang digunakan dalam useFetch composable global (mungkin nuxt.config.ts)? Bagaimana untuk mengelakkan mentakrifkannya dalam setiap useFetch?

P粉638343995 · Answer

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 :-)🎜