[備忘録]GitHubの情報を取得する by vue.js

GitHubの情報を取得する

準備

https://github.com/settings/tokens の Personal access tokens で Generate new token してapiを用意

簡易的な方法

https://api.github.com/users/[username]?access_token=[Personal access token key]

ソースコード

axiosを使用します

npm install --save-dev axios

app.vue

vue.js

<template>
  <div id="app">
    <GitData repoName="UserName" />
  </div>
</template>

<script>
import GitData from "./components/Git.vue";

export default {
  name: "app",
  components: {
    GitData
  }
};
</script>

Git.vue

vue.js

<template>
  <div class="gitdata">
    <h>public repo num : {{this.userDatas.public_repos}}</h>
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "GitData",
  props: {
    repoName: String
  },
  data() {
    return { userDatas: [] };
  },
  mounted() {
    const request = axios.create({
      baseURL: "https://api.github.com"
    });
    request
      .get(
        `/users/${this.repoName}?access_token=api_key` // api key は　gitにあげない！.envなどで管理
      )
      .then(res => {
        this.userDatas = res.data;
        console.log(res);
      });
  }
};
</script>

<style lang="scss">
</style>

memo

apiの取得はどこですれば？
今回はDOMに描画するのでmountedでする。
https://qiita.com/kimullaa/items/2bf8948dffb8c52d2b6b

created
インスタンスの初期化が済んで props や computed にアクセスできる
DOMにはアクセスできない
mounted
created + DOMにアクセスできる