nuxtで初期データをAPIから取得する

nuxtで初期データを非同期に取得する

mountする前にasyncDataを発火して非同期にデータを取得したものをdataにマージされる。

export default {
  components: {},
  validate({ params }) {
    return /^\d+$/.test(params.id);
  },
  async asyncData({ app, route }) {
    try {
      const result = await app.$axios.$get('/api/products', {
        id: route.params.id,
      });
      return {products: result.data};
    } catch(e) {
       console.error(e);
    }
  },
  data() {
    return {
      products: [],
    };
  }
}

ちなみにLifecycleは以下。

nuxtjs.org

参考

ja.nuxtjs.org