Vue.jsのaxiosを使った時になんだこれはとなった話
プログラミングを本格的にスタートして５ヶ月目に入りましたさかもとです。
今回はVue.jsを学んでいる時にAPIから値をひっぱってくるためにaxiosを使ってこんがらがってしまったという話をアウトプットしようと思います。
前提
今回はRailsにVue.js導入している時に個人的に詰まったものをまとめています。
axiosって？
axiosはgetやpostなどのhttpリクエストを使ってサーバからデータを取得や更新を行うことができるようになる
axiosの設定
①axiosを使用する場合初めにインストールをしなくてはならない。
今回はyarnでインストールしようと思う
```
$ yarn add axios
```
導入の方法に関しては
https://github.com/axios/axios
こちらのaxiosのgithubを参照した。
②インストールが終了したら次は設定をしなくてはならない。
初めにApplicationControllerに下記を記述しCSRFを無効化します。
```
protect_from_forgery with: :null_session
```
これをしないとpostを行うことができないので必須です。
CSRF(シーサーフ)に関しては参考文献に記事をはるので都度参照。
③今回、メインのJSファイルをコードで汚したくなかったので別ファイル
を作りそこからインポートしてくる形を取りました。
```
import axios from 'axios'
// ここでaxiosを適用するためにインポートしています。//
const axiosInstance = axios.create({
baseURL: ' api ' //ベースのURLはrutesで設定したapiを適用//
})
export defoult axiosInstance
//export defoltをつけることでこのファイルで定義したメソッドを外部で使用することができる
```
⑤続いて④で設定したaxiosファイルをmainのjsファイルで呼び出し全 体でaxiosが使用できるように設定していきます。
```
import axios from '../axios'
//④で設定したファイルを適用します//
Vue.prototype.$axios = axios
//上で適用したものをprototypeに入れ$axiosを全体で使えるようにします//
```
prototypeに入れることで衝突を避けることができます。
この衝突がなんなのかに関しては参照記事を読む。
⑥最後に⑤で定義した$axios、ライフサイクルフックとメソッドを使 ってAPI通信を実行していきます。
```
:
created() {
this.fTasks() ;
},
methods: {
fTasks() {
this.$axios.get("tasks")
.then( res => this.tasks = res.data )
.catch( err => console.log( err.status ));
}
}
:
```
ライフサイクルフックに関しても参考記事を参照
初めにcreatedでインスタンスが初期化された段階でfTasksが実行されます。
その内容はmethodsに表記されており発火した際
$axios.get("tasks")でgetリクエストを送っています。
そのresponseとして空のtasksに送られてきたdataが代入されます。
これでブラウザに表示されるようになるわけです。
最後に
axiosについては私もまだまだ未経験なので今後も雑にアウトプットしていこうと思います。
読んでいただきありがとうございました。
参考記事
