ページ移動先で使うプロパティ

よくページ構築時で使うプロパティとしてmountedがありますが、それだと例えばv-forでコンポーネントを作成する時に、移動した後に構築される動きが見られてしまいます。

そうならないためにも、ページコンポーネントを作成された段階には、v-forで回すデータを格納しておく必要があります。

ここで、登場するのがNuxt.jsだけに許されたasyncDataプロパティというものがあります。

ページコンポーネント構築前の非同期通信と、後の非同期通信の比較

通信タイミング	プロパティ	用途	/_idの取得
データ初期化前	async asyncData (context)	コンポーネントのdataにデータを格納したい時	context.params.id
データ初期化前	async fetch (context)	Vuexのstateにデータを格納したい時	context.params.id
データ初期化以降	async mounted ()	コンポーネントのdataにデータを格納したい時	this.$route.params.id

mounted等と違うのは、ページロード前にデータを取得できるので、コンポーネントが完成された状態でページを表示することができる点

Usage

async asyncData(context) {
  const res = await context.$axios.$get(`/api/offices/${context.params.id}`);
  return {
    office: res,
    office_name: res.name,
    office_introduction: res.introduction,
  };
 },

データ初期化前の処理のため、thisや$メソッドを使うことができない