Nuxt.jsデータ取得

Nuxt.js （ユニバーサルアプリケーション）では、サーバーサイドレンダリング中にデータをレンダリングするために Nuxt.js 特有のフックを使う必要があります。

この方法について調査したので、記載する。

非同期データ読み込み方法

Nuxtでは非同期なデータを読み込むために２つのフックが用意されている。

fetchフック
asyncDataフック

fetchフック

1. 外部から取得したデータをVuexのstoreに格納して使用する
2. acyncDataとは違ってコンポーネントに値を直接セットすることができない

例）

<template>
  <div>{{ $store.state.hige }}</div>
</template>

<script>
export default {
  async fetch({ app, store }) {
    const doc = await app.$firebase.firestore().collection('hige').get()
    store.commit('setHige', doc.data().hige)
  }
}
</script>

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

export const actions = {
  async GET_STARS ({ commit }) {
    const { data } = await axios.get('http://my-api/stars')
    commit('SET_STARS', data)
  }
}

注意：fetch内ではコンポーネントがインスタンス化される前に呼び出されるため、thisを通してコンポーネントのインスタンスにアクセスすることはできません。

asyncDataフック

1. 外部からデータを取得し、ページコンポーネントへ直接セットする
2. 返される値はコンポーネントのテンプレートからアクセスすることで使用できる

利用例）

<template>
  <div>{{ hoge }}</div>
</template>

<script>
export default {
  async asyncData({ app }) {
    const doc = await app.$firebase.firestore().collection('hoge').get()
    return { hoge: doc.data().hoge }
  }
}
</script>