Nuxt.jsでaxiosを使ってJSONデータを取得し、画面上に表示する

やりたいこと

http://127.0.0.1:8000/api/sampleにアクセスしたら、JSON形式で取得したデータを画面上に表示するアプリケーションを作成する。

手順など

フロントエンド側

ターミナル上でnpx create-nuxt-app XXXといったコマンドで、nuxt.jsのプロジェクトを作成する。

この時、対話式で選択肢をいくつか選ぶ必要がある。

• axios
• Vuetify
• 非SPA
• JavaScript（非TypeScript）

package.jsonにしかるべきモジュールの記述をしたら、npm installコマンドでモジュールをインストールする。

Vueコンポーネント

page/sample.vue

<template>
  <v-row>
    <v-col class="text-center">
      <p>{{ dataOption }}</p>
      <p>{{ $store.state.SampleStore.message }}</p>
      <p>この下に sampleObjectData が入ります。</p>
      <p>
        {{ sampleObjectData }}
        <br>
        <!-- 下記、どっちも「山田太郎」で表示される -->
        {{ sampleObjectData.name }}
        <br>
        {{ sampleObjectDataName }}
      </p>
    </v-col>
  </v-row>
</template>

<script>

export default {
  name: 'sample',
  data() {
    return {
      dataOption: 'componentのdataオプション',
    }
  },
  // ストアのmutationsなどを実行する
  mounted() {
    this.$store.dispatch('SampleStore/fetchSampleAction')
    console.log("sample.vueのmountedが動きました")
  },
  // ストアのgetterなどを実行する
  computed: {
    message() {
      console.log("computedのmessage")
      return this.$store.state.message
    },
    /** stateのsampleオブジェクトのgetterを実行 */
    sampleObjectData() {
      return this.$store.getters['SampleStore/getSamplesObject']
    },
    sampleObjectDataName() {
      return this.$store.getters['SampleStore/getSamplesObjectName']
    },
  }
}

</script>

ストア（Vuexモジュール）

store/SampleStore.js

const state = {
  /** actionsでAPI通信したデータを代入する先のオブジェクト */
  sample: '',
}

const getters = {
  // stateの値をgetterとしてreturnする
  getSamplesObject: (state) => {
    return state.sample
  },
  getSamplesObjectName: (state) => {
    return state.sample.name
  },
}

const actions = {
  /**
   * コンポーネントのmountedで`this.$store.dispatch('SampleStore/fetchSampleAction')`でこのactionsのメソッドが呼び出される。
   */
  async fetchSampleAction (context) {
    console.log("storeのfetchSampleActionが動いています")
    console.log("axiosの非同期通信で特定のエンドポイントからgetした結果をresultsという定数に代入します。")
    const results = await this.$axios.get("http://127.0.0.1:8000/api/sample")
    if (!results) return

    /** axiosでapi通信しデータを取得した後、commit()メソッドで第二引数に取得したデータを指定し、mutationsのメソッドを実行する。 */
    context.commit('setSamples', results.data)
  },
}

const mutations = {
  /** actionsでapi通信しGETしたデータを第2引数に指定。そのデータをstateのsampleオブジェクトに代入する */
  setSamples(state, data) {
    state.sample = data
    console.log("storeのmutationのsetSamplesメソッドが動き、stateのsampleオブジェクトにdataが代入されました。")
    console.log(state.sample) // sampleオブジェクトに代入されたapiのデータを表示
    console.log(`名前：「${state.sample.name}」が取得できましたね。`)
    console.log(`性別：「${state.sample.gender}」が取得できましたね。`)
    console.log(`メールアドレス：「${state.sample.mail}」が取得できましたね。`)
  }
}

export default {
  state,
  getters,
  actions,
  mutations,
}

package.json

{
  "name": "nuxt-api-sample",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.1"
  }
}

nuxt.config.js

export default {
  modules: [
    "@nuxtjs/axios",
  ],
}

API側（今回はLaravel）

routes/api.php

<?php
use Illuminate\Support\Facades\Route;

// http://127.0.0.1:8000/api/sample
Route::get('/sample', function () {
    return response()->json([
        'name' => '山田太郎', 'gender' => '男','mail' => '[e-mail]']
    );
});

Laravelを使用する場合はバックエンド側でphp artisan serveコマンド、
フロントエンド側のプロジェクトでnpm run devコマンドを打ち、両方のサーバーを起動させる。

ブラウザ上でhttp://127.0.0.1:8000/api/sampleにアクセスすると、画面上にaxiosでGETした文字列が表示される。

表示結果

componentのdataオプション

この下に sampleObjectData が入ります。

{ "name": "山田太郎", "gender": "男", "mail": "[e-mail]" }
山田太郎
山田太郎