そうだ、教祖になろう。出エジプト記 第4章3節 Vue.jsでAjax通信する

Аксиос!（適任！）

---

第2章2節 CloudFrontでAPI Gatewayを同一ドメイン化するでjQueryを利用してサーバとAjax通信しました。
Vue.jsではaxiosというライブラリを使います。
Wikipediaによると

アクシオスは元々はギリシャ語で「価値が有る」「ふさわしい」「値する」の意。新約聖書にも複数個所に使われている。正教会では新たに聖職者が叙聖される時に使われる事から「適任」という訳が当てられることもある。

ということです。
このaxiosがそっから来てるのかはわかりませんが。

www.youtube.com

動きを確認してみましょう。
axiosをインストールします。

$ yarn install -D axios

サーバサイド処理の代わりに静的ファイルを置いてみます。
publicの下にtest.jsonを作ります。

{
    "key1": "value1",
    "key2": "value2"
}

src/views/Home.vueをコピーしてsrc/views/Ajax.vueを作ります。
データのinfoを<div>タグにバインドしています。
画面が読み込まれたときにtest.jsonを取得するようにしてみます。

<template>
  <div>
    {{ info }}
  </div>
</template>

<script>
import axios from "axios"

export default {
  name: "ajax",
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get("/test.json")
      .then(response => (this.info = response))
  }
}
</script>

src/router/index.jsにAjax.vueの設定を追加します。

  {
    path: "/ajax",
    name: "ajax",
    component: () =>
      import ("../views/Ajax.vue")
  }

最後に src/App.vueにリンクを追加します。

      <router-link to="/ajax">Ajax</router-link>

画面を確認してみます。
「Ajax」リンクをクリックすると、

レスポンスのステータス200のヘッダとボディが<div>タグの中に表示されました。

動いたには動いたんですが、ビルドの際にWarningが出てしまいます。
次回はこれを何とかしたいと思います。