vue3で遊んでみたらasync setup()がうまく動かなった
できたもの
作ったもの
使ったもの
- vue 3
- typescript
- pokeapi
git
はまった
async setup()が描画されない
- <Suspense></Suspense>で囲む
vue3から下記のようにsetup関数が使える。
export default defineComponent({ name: 'HelloWorld', setup() { const state = reactive<TodoState>({
setupの中でreactiveを使うと、vue2までのdata(){}のように使えた。 そこまでは良かったが、非同期関数を使いたかったので、setup()をasync setup()に変更したら動かなった。 いろいろ調べた結果、非同期のsetupを使ったコンポーネントを描画するときは、コンポーネントの外側に<Suspense>を定義する必要があった。
<template>
<Suspense>
<HelloWorld/>
</Suspense>
</template>
これで動いたので良かった。
雑記
他にも、setup(){}の中で、computedとかvue2のやつ使えて便利そうだった。 template以下に要素を2つ以上追加できるようになったのでそれもうれしい。
<template\> <div></div> <div></div> </template\>
早くこないかな :)
