kz’s blog

興味のあることについて書いていきます。

Vue UI で axios を導入し ajax 通信をできるようにする

Vue.js から API を介してデータの取得等を行う際に axios (Vue で ajax を利用できるようになる) を使用します。

バージョン確認

$ node -v
v10.6.0

$ npm -v
6.1.0

$ vue --version
3.0.0-rc.10

プロジェクトの作成

Vue UI にてプロジェクトを作成し、起動ができるところまで進みます。

www.kz62.net

axios インストール

Vue UI 管理画面 > 依存 > +インストール依存

f:id:kz62:20180815052920p:plain

axios をインストールします。

ソースコード修正

axios を使用する準備

src/App.vueimport します。

import axios from 'axios'

axios · kz62123/sample@1c58291 · GitHub

axios を使用して API にアクセスし、データを取得する

src/App.vue でデータを取得します。

  // API で取得したデータを設定する
  data () {
    return {
      info: null
    }
  },
  // API でデータを取得する
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }

テンプレート側で{{ info }}を記述し、データを表示することも忘れないでください。

axios でデータ取得 · kz62123/sample@f4f4078 · GitHub

確認

これで画面を表示させると Vue のロゴの近くに取得したデータが表示されているかと思います。

f:id:kz62:20180815052956p:plain

TODO

今回はsrc/App.vueでインポートしたので別のコンポーネントから使用したい場合は都度インポートしなければなりません。

src/main.jsでインポートして全体に適用できれば楽なのですが勉強不足なのでそこら辺よく分かってないです。

分かり次第こちらの記事に追記したいと思います。