ページ表示前にデータを取得して反映できる「Nuxt.js」の非同期データ機能を使いこなそう

本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Webページの状態を集中管理するVuexストアを説明しました。今回は、ページの表示前にネットワークからデータを取得して、ページやVuexストアに反映できる、Nuxt.jsの非同期データ機能について説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Vue.jsのコンポーネントは、dataメソッドに定義されたデータを画面に表示しますが、Nuxt.jsでは、Webページの表示前にコンポーネントのデータをネットワークから取得