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コンポーネント
```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モジュール）
```js: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,
}

```

```json: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"
  }
}

```

```js:nuxt.config.js
export default {
  modules: [
    "@nuxtjs/axios",
  ],
}
```


## API側（今回はLaravel）

```php: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' => 'yamada@test.com']
    );
});
```

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

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

### 表示結果
```txt
componentのdataオプション

この下に sampleObjectData が入ります。

{ "name": "山田太郎", "gender": "男", "mail": "yamada@test.com" }
山田太郎
山田太郎
```