问Nuxt3 -在可组合内部使用useFetch，并在模板中返回/使用它
EN

Stack Overflow用户

提问于 2022-11-30 12:58:37

回答 1查看 28关注 0票数 0

我创建了一个模板，它从一个可组合的函数中运行。在可组合函数中，我使用useFetch进行服务器端API调用。我将返回值作为变量存储在data中。

问题是:返回/值给出了以下输出："[object Promise]"

模板: Home.vue

<script lang="ts" setup>
import { useAccount } from "@/stores/account";
import { menu } from "@/data/account"

definePageMeta({
  layout: 'checkout',
})
const account = useAccount();

const { processEmail, testTest } = await useCheckout();

</script>

<template>
  <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
    Data: {{ testTest() }} 
  </div>
</template>

组合: useTest.ts

export const useCheckout = async () => {
 
  const testTest = async () => {
    const { data: element } = await useFetch('https://www.boredapi.com/api/activity');
    return element
  }

  return {
    testTest
  }
}

nuxt.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-30 15:09:47

您正在等待useCheckout (它不需要异步，因为它不使用await)。函数，而不是testTest函数。这应该是可行的：

<script lang="ts" setup>
import { useAccount } from "@/stores/account";
import { menu } from "@/data/account"

definePageMeta({
  layout: 'checkout',
})
const account = useAccount();

const { processEmail, testTest } = await useCheckout();
const data = await testTest();

</script>

<template>
  <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
    Data: {{ data }} 
  </div>
</template>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74628190

复制

相似问题

问Nuxt3 -在可组合内部使用useFetch，并在模板中返回/使用它
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Nuxt3 -在可组合内部使用useFetch，并在模板中返回/使用它EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Nuxt3 -在可组合内部使用useFetch，并在模板中返回/使用它
EN