如何在Vue 3.0 Setup()函数中使用使用TypeScrip的异步/等待
(此问题已针对JavaScript回答,见下文,但此问题特定于TypeScrip,其行为有所不同)
我正在尝试使用TypeScrip使用Vue3.0中的异步功能。
在不使用异步的情况下,此代码运行良好:
// file: components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
async setup() { // <-- this works without 'async'
const test = 'test'
// await doSomethingAsynchronous()
return {
test,
}
},
})
</script>
使用async setup()
时,组件&HelloWorld";将从页面中消失,并且Firefox控制台告诉我
"Uncaught (in promise) TypeError: node is null (runtime-dom.esm-bundler.js)"
当我将async setup()
更改为setup()
时,代码工作,
但这样我就不能在Setup函数中使用Async/AWait。
所以我的问题: 如何在setUp()函数中使用TypeScrip中的异步/等待?
编辑:
此问题的答案:why i got blank when use async setup() in Vue3显示async setup()
确实适用于JavaScript,因此我希望它也适用于TypeScrip。
解决方案
尝试使用onMounted
挂钩操作异步调用:
setup() {
const users = ref([]);
onMounted(async () => {
const res = await axios.get("https://jsonplaceholder.typicode.com/users");
users.value = res.data;
console.log(res);
});
return {
users,
};
},
LIVE DEMO
相关文章