Nuxtで非同期処理を簡単にやってみる

API叩いてデータを取得するというのは、axiosを使えば簡単ですが、そのデータを準備するのが面倒。

色々あるが一番手っ取り早くて使いやすいのがこれだった。
https://jsonplaceholder.typicode.com/

このサイトを見ればわかるように数多くのデータを返却してくれるので、これを使う。

pages/users/index.vue

<template>
    <div>
        <P>This is Index Page</P>
        <h1>{{items.title}}</h1>
        <nuxt-link :to="`/users/${items.id}`">
            {{items.userId}}
        </nuxt-link>
    </div>
</template>



<script>

export default {

  data(){
  },
  async asyncData({app}){
    const items = await app.$axios.$get('https://jsonplaceholder.typicode.com/todos/1')
    console.log(items)
    return{
      items
    }
  }
}
</script>

これでユーザーのIDが取れるのでリンク先にユーザーIDを指定します。
あとはそのIDでまたデータを取得します

pages/users/_id.vue

<template>
    <div>
        <p>
           UserID:{{userId}}
           {{user.name}}
           {{user.email}}
        </p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            userId: this.$route.params.id
        }
    },
    async asyncData ({route,app}) {
        const user = await app.$axios.$get(`https://jsonplaceholder.typicode.com/users/${route.params.id}`)
        return{
            user
        }
    }
}
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です