Nuxt3中useAsyncData结合插件返回null及runtimeConfig使用问题

核心问题分析 #

1. 错误使用await调用useAsyncData：useAsyncData是Nuxt提供的同步组合式函数，不需要加await，强行使用await会破坏其响应式逻辑，导致data无法正确赋值。
2. 重复创建Appwrite实例：原插件中每次调用$api()都会新建一个Appwrite实例，不仅低效，还可能因重复初始化引发请求异常。
3. 未排查请求错误：请求可能因配置错误、权限问题或资源不存在失败，但未通过error对象定位具体原因。

解决方案 #

1. 修正Appwrite插件（只初始化一次实例）

修改/plugins/demo.js，提前初始化好Appwrite实例并全局提供，避免重复创建：

import { Appwrite, Query } from "appwrite";

export default defineNuxtPlugin(() => {
  // 在插件根上下文获取配置，确保Nuxt实例可用
  const config = useRuntimeConfig();
  
  // 仅初始化一次Appwrite实例
  const api = new Appwrite();
  api
    .setEndpoint(config.app.endpoint)
    .setProject(config.app.project);

  return {
    provide: {
      api // 直接提供已初始化的实例
    }
  }
})

2. 修正页面中useAsyncData的使用方式

去掉await，添加错误日志排查问题，同时用Promise.all优化并行请求性能：

// /pages/collections/[slug].vue
const { $api } = useNuxtApp();
const route = useRoute();

const { data, pending, error, refresh } = useAsyncData(
  `collectionsById-${route.params.slug}`, 
  async () => {
    // 并行发起两个请求，提升效率
    const [products, info] = await Promise.all([
      $api.database.listDocuments(PRODUCTS_COLLECTION_ID),
      $api.database.getDocument("62750820bc5ef93a8152", route.params.slug)
    ]);
    return { info, data: products };
  }
);

// 打印错误信息，快速定位请求失败原因
if (error.value) {
  console.error("请求失败详情:", error.value);
}

3. 验证基础配置与权限

• 确认nuxt.config.ts中的Appwrite配置正确：

  export default defineNuxtConfig({
    runtimeConfig: {
      app: {
        endpoint: process.env.APPWRITE_ENDPOINT,
        project: process.env.APPWRITE_PROJECT_ID
      }
    }
  })
  

• 检查Appwrite控制台：确保目标集合存在、文档ID正确，且当前权限允许读取该集合内容。

内容的提问来源于stack exchange，提问作者Whyte