nuxt3 需要访问 Nuxt 实例的可组合项在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外被调用

Question

我从 nuxt 3 开始，我正在开发一个项目，在该项目中，我们将 useFetch 集中在我们决定放置的可组合项中

const config = useRuntimeConfig();

使用环境变量，但出现以下错误

[nuxt] 需要访问 Nuxt 实例的可组合项在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外被调用

当从 pinia 商店调用可组合项时

这是可组合项的代码

import { UseFetchOptions } from "nuxt/app";
const config = useRuntimeConfig();
export function useApiFetch<T>(path: string, options: UseFetchOptions<T> = {}) {
 return useFetch(config.public.BASE_API_URL + path,{
    ...options,
  });
}

以我们使用它的地方为例

export const useAuthStore = defineStore("auth", () => {
  const user = ref<User | null>(null);
  const isLoggedIn = computed(() => !!user.value);
  async function logout() {
    await useApiFetch("/logout", { method: "POST" });
    user.value = null;
    token.value = null;
    navigateTo("/auth");
  }

Answer 1

useFetch

是一个可组合函数，不能直接替代

fetch

函数。可组合项应该在组件设置的主体中使用，任何其他用法都需要符合。

useFetch

应在创建商店时调用一次，并且该对象需要在整个商店中重用：

defineStore("auth", () => {
  const logoutFetch = useApiFetch("/logout", { method: "POST", immediate: false });
  ...
  async function logout() {
    await logoutFetch.execute();
    ...

这对

auth

商店的使用进行了限制，仅限于 Nuxt 可组合项允许的地方：

useFetch 是一个可组合项，可以在设置函数、插件或路由中间件中直接调用。