Vue中无法访问API请求获取的变量该如何解决？

你的问题核心在于普通变量无法触发Vue的响应式更新，或者组件初始渲染时变量还未完成赋值，导致模板无法同步显示最新值——虽然控制台能打印出正确结果，但模板无法感知普通变量的变化。

解决方法1：用ref声明响应式变量 #

把test定义为ref响应式变量，这样数据赋值后模板会自动更新：

<script setup>
import { ref } from 'vue';
var userStore = useUsersStore();
const test = ref(''); // 初始化响应式变量

// 异步获取数据并赋值
const fetchUser = async () => {
  const currentUser = await userStore.getById(1);
  console.log(currentUser.data.firstName);
  test.value = currentUser.data.firstName; // 修改ref的value属性更新值
};

fetchUser();
</script>

<template>
<div class="ml-3">
  <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">{{ test }}</p>
  <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">View profile</p>
</div>
</template>

解决方法2：直接使用响应式用户对象 #

如果需要用到用户的多个属性，可以把currentUser声明为响应式变量，模板中直接访问：

<script setup>
import { ref } from 'vue';
var userStore = useUsersStore();
const currentUser = ref(null); // 初始化响应式对象

const fetchUser = async () => {
  currentUser.value = await userStore.getById(1);
  console.log(currentUser.value.data.firstName);
};

fetchUser();
</script>

<template>
<div class="ml-3">
  <!-- 用可选链操作符避免数据未加载时的报错 -->
  <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">{{ currentUser?.data?.firstName }}</p>
  <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">View profile</p>
</div>
</template>

原代码不生效的原因 #

你之前的代码里，test是普通的const常量，不属于Vue的响应式系统。虽然await能拿到数据并赋值，但Vue无法检测普通变量的变化，因此模板不会更新。另外，顶层await会让组件进入异步状态，若没有用<Suspense>包裹组件，初始渲染时test还未被赋值，后续赋值也无法触发模板更新。

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