fetch メソッド

fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては asyncData メソッドとよく似ています。

• 型: Function

fetch メソッドが設定されている場合、コンポーネント（ページコンポーネントに限ります）がロードされる前に毎回呼び出されます。サーバサイドでは一度だけ呼び出され（Nuxt アプリケーションへの最初のリクエスト時）、クライアントサイドでは他のルートへ移動したときに呼び出されます。

fetch メソッドは第一引数として context オブジェクトを受け取るので、データを取得し、取得したデータをストアに入れることができます。fetch メソッドを非同期にするためには Promise を返却してください。そうすれば nuxt.js はコンポーネントがレンダリングされる前に promise が解決されるまで待機します。

pages/index.vue の例:

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  fetch ({ store, params }) {
    return axios.get('http://my-api/stars')
      .then((res) => {
        store.commit('setStars', res.data)
      })
  }
}
</script>

async/await を使ってコードをスッキリさせることもできます:

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
</script>

Vuex

ストアアクションを呼び出す場合は、fetch 内の store.dispatch を使用してください。その際、内部の async/await を用いてアクションの終了を待つようにしてください：

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

store/index.js

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

クエリ文字列の変化のリスニング

fetch メソッドは、デフォルトではクエリ文字列の変更に対して呼び出されません。たとえばページネーション用のコンポーネントを作成する時など、この挙動を変更したい場合は、ページコンポーネントの watchQuery プロパティを使用してリスニング用のパラメータを設定することできます。詳しくは、API watchQuery のページを参照してください。