【Vue.js】 axios / firebaseを利用して、データのやり取り

##【ゴール】
axios / firebaseを利用して、データのやり取り

![画面収録 2020-10-14 11.05.15.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/8cd976be-6011-e8f3-4c87-7c4c915c7328.gif)


##【環境】
`mac catarina 10.156`
`Vue.js v2.6.12`

##【実装】

####firebaseのセットアップ
下記URLにアクセス、googleアカウントの登録、作成
https://firebase.google.com/

#####1　プロジェクト作成
![スクリーンショット 2020-10-14 11.09.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/1c280cea-9adb-c09a-3a10-6db5a33b7192.png)

#####2　アナリティクスはOFFで構いません。
![スクリーンショット 2020-10-14 11.11.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/9fcd3291-42a3-2015-3809-cd65b8563593.png)

#####3　cloud firestroeにてdatabaseの作成
![スクリーンショット 2020-10-14 11.12.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/7f621d16-56f8-e1ed-11cb-bb16aed5da63.png)

#####4　テストモードで構いません
![スクリーンショット 2020-10-14 11.13.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/4ae3dc7b-3ddc-798f-1a9d-d3df7f0c1632.png)

#####５　ロケーションはデフォルトのままで構いません
![スクリーンショット 2020-10-14 11.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/d8c840d4-93a4-ae3f-d24d-2dd88733489f.png)

#####６　作成完了
![スクリーンショット 2020-10-14 11.15.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/d3019a34-70cf-3794-1826-fe9a3cc7ee11.png)

#####７　左のメニューバーの設定→プロジェクトの設定→プロジェクトIDを確認
![スクリーンショット 2020-10-14 11.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/21f2e822-0f13-1dba-52ec-4ffc22d1e490.png)


####axiosのインストール

`※ワークスペース作成は割愛`

```Mac.terminal
$ npm install axios
```

####コード

`<template>内`
※「@click="textSend"」でaxiosが発火**（下記に詳細ページ貼ってます）**
※「v-for」で繰り返し処理で表示


```js:App.vue

<template>
  <div>
    <h2>Post,new</h2>
    <div>
      <div class="form">
        <textarea name="text" cols="100" rows="10" v-model="text"></textarea
        ><br />
        <button @click="textSend">send</button>
      </div>
    </div>
    <div v-for="post in posts" :key="post.text">
      {{ post.fields.text.stringValue }}
    </div>
  </div>
</template>
```


`<script>内`
※「import axios from "axios";」でaxioをインポート
※「created」でページ読み込みじにデータベースから情報を取得
※「posts」に取得したデータを配列として渡す
※「stringValue」はデータ型、指定してあげる
※「this.text = '';」でtextarea内を空にする

```js:app.js

import axios from "axios";

export default {
  data() {
    return {
      text: "",
      posts: [],
    };
  },
  created() {
    axios
      .get(
        "https://firestore.googleapis.com/v1/projects/texposts/databases/(default)/documents/text"
      )
      .then((res) => {
        this.posts = res.data.documents;
        console.log(res);
      });
  },
  methods: {
    textSend() {
      axios
        .post(
          "https://firestore.googleapis.com/v1/projects/7番のプロジェクトID/databases/(default)/documents/text",
          {
            fields: {
              text: {
                stringValue: this.text,
              },
            },
          }
        )
        .then((res) => {
          console.log(res);
        });
      this.text = "";
    },
  },
};
</script>
```

##【まとめ】
■firebaseをセットアップ
■axiosをインストールしてhttp通信を可能に
■記述。URL等のタイポに気を付ける

##【オススメ記事】
■ 【Vue.js】 IF文・For文　条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de

■【Vue.js】クリック処理　@click 
https://qiita.com/tanaka-yu3/items/e578cadf35a7bc024770

■ 【Vue.js】Vue.jsでfontawsome(Free版)を使用する方法　
https://qiita.com/tanaka-yu3/items/86d05241f72674d186f6