🙆‍♀️

【Nuxt.js】asyncDataの戻り値

2022/08/13に公開

知識もないしブログも書いたことないのでご容赦．
Nuxt初心者で，これから必要なのでブログなんか作ってみて学ぼうと思っていた時，asyncDataの返り値が思ったように動かせなかったのでメモします．間違ってる点や補足点あれば教えていただけると幸いです．
この記事見てほぼパクって書いてました．

内容

記事のコードみて書いていた時に二重括弧の部分dataプロパティに定義もしてないので何でtitleとか使えるねん，asyncDataのreturnってどこに返ってんのって思って色々調べたのが経緯です．

<template>
  <main class="main">
    <h1 class="title">{{ title }}</h1>
    <p class="publishedAt">{{ publishedAt }}</p>
    <div class="post"> {{ body }} </div>
  </main>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get(
      url
    )
    return data
  }
}
</script>

変数dataに入ってるオブジェクトは以下の通りです．

{
  id: 'xxxxxx',
  createdAt: '20xx-xx-xxTxxxxxx',
  updatedAt: '20xx-xx-xxT13:02:13.577Z',
  publishedAt: '20xx-xx-xxT13:02:13.577Z',
  revisedAt: '20xx-xx-xxT13:02:13.577Z',
  title: 'title',
  body: 'hogehoge'
}

調べた感じだとdataプロパティと合わせて帰ってくるみたいですね．
dataは後でasyncDataの返り値が優先されるみたいなのでその辺は気を付ける必要がありそう．
しょぼい内容ですが，自分へのメモも含めて書きました．
書いてるうちになんでこんなアホな疑問を持ったのか分からなくて新たな疑問が出てきた．

内容

Discussion