Vue Apollo中useMutation数据无法在模板使用——异步问题？

你碰到的本质问题是异步数据的时机不匹配：

• 异步函数里用await getContactInfo()等待mutation执行完成，此时onDone已触发并给email/mobile赋值，所以能拿到有效值；
• 模板渲染是同步进行的，初始状态下email/mobile为空，且你未等待mutation完成就直接渲染<a>标签，自然显示空值；即便后续mutation完成赋值，若模板未做状态判断，也可能无法响应式更新显示最新值。

1. 利用useMutation自带状态控制渲染 #

useMutation本身会返回loading和error状态，直接复用即可，在模板里等待加载完成且有数据时再显示链接：

<template>
  <a 
    v-if="!loading && email" 
    :href="`mailto:${email}`"
  >
    发送邮件
  </a>
  <span v-else-if="loading">加载中...</span>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useMutation, gql } from '@vue/apollo-composable'

const mobile = ref('')
const email = ref('')

const {
  mutate: getContactInfo,
  onDone,
  loading, // 直接使用useMutation返回的loading状态
  error
} = useMutation(
  gql`
    mutation ContactInfo($userId: String!) {
      contactInfo(userId: $userId) {
        mobile
        email
      }
    }
  `,
  () => ({
    variables: {
      userId: props.userID
    }
  })
)

onDone(data => {
  const contact = data.data.contactInfo
  mobile.value = contact.mobile
  email.value = contact.email
})

// 可选：组件挂载时预先执行mutation，避免点击时才加载数据
onMounted(async () => {
  await getContactInfo()
})
</script>

2. 确保响应式绑定正确 #

• 模板里直接写email即可，无需添加.value（<script setup>中的ref会自动解包）；
• 可在onDone中打印console.log(data)，确认data.data.contactInfo的结构与你代码中的取值路径完全匹配，避免因路径错误导致赋值失败。

3. 优化移动端mailto触发逻辑 #

如果直接使用<a>标签仍有问题，可通过动态创建a标签并模拟点击的方式，确保数据就绪后再触发：

const emailContact = async () => {
  loading.value = true
  await getContactInfo()
  if (email.value) {
    const link = document.createElement('a')
    link.href = `mailto:${email.value}`
    link.click()
  }
  loading.value = false
}

4. 避免重复执行mutation #

若多次点击按钮会重复发起请求，可添加判断逻辑，仅当数据为空时才执行mutation：

const emailContact = async () => {
  if (!email.value) {
    loading.value = true
    await getContactInfo()
    loading.value = false
  }
  email.value && location.replace(`mailto:${email.value}`)
}

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo