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に値として入っているのが確認できます。   もちろん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>

  実際にブラウザで確認するとこのように値が取得できているのが確認できます。 上記は外部リソースの静的ファイルにあるデータから値を取得する例ですが、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の値に入っていることが確認できます。   テンプレート内にデータを展開することも可能です。このようにすることで、外部のAPI経由で取得したデータをフロント側で加工し、ウェブページ上で見せるような仕組みを作ることができます。  

---

  WordPressなどのCMSに限らず、データベースからAPI経由で情報を取得して、フロント側で扱うなどの場合にはaxiosを使うととても便利ですね。Vue.jsでウェブアプリケーションを作成する場合には必須の機能と言えるのではないでしょうか。