如何在Vue setup中获取async函数内的const变量并外部使用？

你现在的需求是把setup内部异步函数recieveData里的arrayData赋值给外部的invoiceData，但当前写法存在两个问题：

1. 用const声明的普通变量invoiceData不能被重新赋值，invoiceData = arrayData会直接报错
2. 异步函数内部的变量有作用域限制，外部无法直接访问，而且异步操作需要等待完成才能拿到有效数据

下面是两种可行的解决方法：

方法一：使用响应式变量+组件挂载时调用异步函数 #

这种方法适合大多数场景，利用Vue的响应式变量存储数据，确保数据更新后视图能同步刷新：

import { ref, onMounted } from 'vue';

setup() {
    // 用ref声明响应式变量，初始值为空数组
    const invoiceData = ref([]);

    async function recieveData() {
        const result = await fetch(`${import.meta.env.VITE_APP_API_URL}/invoice`, {
            method: "GET",
        });
        const arrayData = await result.json();
        // 给响应式变量赋值，ref类型需要通过.value访问
        invoiceData.value = arrayData;
    }

    // 组件挂载完成后调用异步函数，确保DOM渲染后获取数据
    onMounted(async () => {
        await recieveData();
        // 此时invoiceData已经拿到后端返回的数据了
        console.log(invoiceData.value);
    });

    // 返回响应式变量，供模板使用
    return { invoiceData };
}

方法二：让异步函数返回数据，在setup中直接等待结果 #

如果你的组件可以配合Suspense使用，也可以把setup声明为async函数，直接等待异步函数返回结果：

import { ref } from 'vue';

async setup() {
    const invoiceData = ref([]);

    async function recieveData() {
        const result = await fetch(`${import.meta.env.VITE_APP_API_URL}/invoice`, {
            method: "GET",
        });
        // 直接返回获取到的数据
        return await result.json();
    }

    // 等待异步函数执行完成，把结果赋值给响应式变量
    invoiceData.value = await recieveData();

    return { invoiceData };
}

注意事项 #

• 不能用普通的const变量存储异步获取的数据：一方面普通const无法重新赋值，另一方面非响应式变量更新后无法触发视图刷新
• 异步操作必须用await等待结果，否则会拿到空的初始值，因为fetch是异步执行的

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