Nuxt中useAsyncQuery触发警告：组件已挂载，请改用$fetch

首先，警告的核心原因是：useAsyncQuery 基于Nuxt的useAsyncData实现，这类API设计用于组件初始化/服务端渲染阶段预获取数据，不能在组件已挂载后的用户交互（比如点击事件）中调用，所以Nuxt提示你改用客户端侧的$fetch。

你之前的尝试存在两个问题：

• 拼写错误：把$fetch写成了$fecth
• 错误地将请求移到点击事件外部，这会导致组件初始化时就发起请求，既不符合你"点击后跳转支付"的需求，也可能因为代码残留触发警告

正确的做法是在点击事件内部使用$fetch发起请求，代码示例：

const redirectToPayment = async () => {
  // 修正拼写，直接用$fetch发起请求
  const data = await $fetch('/api/your-checkout-endpoint', {
    method: 'POST',
    body: {
      variantId: product.value.productByHandle.variants.edges[0].node.id
    }
  });

  window.location.href = data.checkoutCreate.checkout.webUrl;
}

如果你的createCheckoutMutation是GraphQL请求，需要调整$fetch的配置适配GraphQL格式，比如：

const redirectToPayment = async () => {
  const data = await $fetch('/api/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: createCheckoutMutation,
      variables: {
        variantId: product.value.productByHandle.variants.edges[0].node.id
      }
    })
  });

  window.location.href = data.data.checkoutCreate.checkout.webUrl;
}

另外，确保你没有在组件的顶层（点击事件外）残留useAsyncQuery或错误的$fecth代码，清除缓存后重新运行项目，警告应该会消失。

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