Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

Vue.js2019.9.5

webアプリケーションを作成するときに、APIなどからデータを取得するなどの要件が含まれることもあるかと思います。今回はVueのプロジェクトをVue-CLIを使って開発するときにAPIからデータを取得する例をまとめていきたいと思います。 VueのプロジェクトでAPIにアクセスする場合には「axios」と呼ばれるものを使います。axiosはブラウザ上やnode.jsで動くHTTPクライアントで、APIへの連携が簡単に実装することができます。axiosはモジュールとして提供されているので、下記のようにnpmもしくはyarn経由でnode_modulesにインストールします。

$ npm install axios
 or
$ yarn add axios

インストールするとこのようにpackage.jsonに追加されます。【package.json】※一部抜粋

{
 "dependencies": {
  .......
  "axios": "^0.18.0",
  .......
 },
}

今回はaxiosでJSON形式の外部データを取得し、それをstateの値に入れてテンプレート内で出力するというのを例にします。ですので、store.jsにaxiosをインポートしてから使います。ここではstateの値を初期値として設定し、mutationsとactionsを定義し、gettersでstateの値を取得できるようにしています。【store.js】

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  dataSet: {}
 },
 mutations: {
  mutateDataSet(state, payload) {
   state.dataSet = payload;
  }
 },
 actions: {
  commitDataSet(store) {
   return axios.get('./data/sample.json')
    .then(response => {
     store.commit('mutateDataSet', response.data)
    })
    .catch((reason) => {
     console.log(reason.message)
    })
  }
 },
 getters: {
  getStateDataSet: (state) => state.dataSet
 }
})

axiosはactions内で使われています。axiosに続くget()メソッドの引数に外部データのパスを指定することでデータを取得できます。axiosはPromiseベースになっているので、then()メソッドで繋いで値を取得します。引数にはコールバック関数によりmutations経由でstateに取得した値を代入するようにしていきます。その後にはcatch()メソッドで取得が失敗した場合の処理を付け足しています。また今回サンプルに使ったJSONデータはこちらのような形になります。Vue-CLIの場合ではビルドに含めないファイルはpublicフォルダに入れておきます。【/public/sample.json】

[
 {
  "id": 1,
  "name": "りんご",
  "price": "100円"
 },
 {
  "id": 2,
  "name": "みかん",
  "price": "50円"
 },
 {
  "id": 3,
  "name": "ぶどう",
  "price": "400円"
 }
]

そしてVueのコンポーネントファイル内で、取得したデータを扱っていきます。下記のようにcreated内で、storeにアクセスして、dispatch()メソッドで定義したactionsを実行します。【Vue】※一部抜粋

<script>
export default {
 .......
 created() {
  this.$store.dispatch('commitDataSet')
 }
 .......
}
</script>

ブラウザのデベロッパーツールで確認すると、実際に取得した外部リソースのデータがmutations経由でstateに値として入っているのが確認できます。 Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

もちろんstateに入ったデータは、テンプレート内で出力することもできます。ここではcomputed内でgettersでstateの値を取得し、テンプレート内に出力しています。【Vue】※一部抜粋

<template>
 <div id="app">
  <pre>{{ dataOutput }}</pre>
 </div>
</template>
<script>
export default {
 .......
 computed: {
  dataOutput() {
   return this.$store.getters.getStateDataSet
  }
 },
 created() {
  this.$store.dispatch('commitDataSet')
 }
 .......
}
</script>

実際にブラウザで確認するとこのように値が取得できているのが確認できます。 Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

上記は外部リソースの静的ファイルにあるデータから値を取得する例ですが、axiosを使うことで、API経由でデータを取得することができます。先ほどと同じようにactions内でget()メソッドにAPIのアクセス先となるURLを指定します。【store.js】※一部抜粋

.......
actions: {
 commitDataSet(store) {
  return axios.get('https://example.com/api/')
   .then(response => {
    store.commit('mutateDataSet', response.data)
   })
   .catch((reason) => {
    console.log(reason.message)
   })
 }
},
.......

ここではWordPressのREST APIをサンプルとして使ってみました。同じ要領で取得したデータをstateの値に入っていることが確認できます。 Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する