これを知ったら役に立つ！ローディング画面をいつでも出す方法！

Vue.jsでサイト制作をしている際に、例えば、バックエンドとのやり取りを行うときにページが真っ白になって欲しいなと思ったことはありませんか？？？

ページが真っ白にならないと、他のボタンを押してしまったり、ログアウトしたりしたら適切に処理が行われるかとても不安。。。

今日はそんな方に必見！！

Vue.jsでローディング画面を任意の場所で出す方法をお教えします。

まだ、Vue.jsに触れたばっかりの人や、今サイト制作を行っている方などに物凄く参考になると思うので、是非ご覧ください！

まず初めに、今回は@terufumi1122さんの[【Vue.js】ローディング画面の実装方法（サンプルコード付き）](https://qiita.com/terufumi1122/items/214d82f74370ef377aa2)の記事を参考にさせて頂きました。ご協力誠にありがとうございます。

こちらの記事を読んでいただくとより理解が深まります。

次は、僕の記事[何回も使う関数を、いつでもどこでも呼び出したい。。。](https://qiita.com/akki-memo/items/0bd31aa31db01e5ab9c4)を利用するので、こちらも読んでいただくとより理解が深まります。

コードだけ見てみたいという方は、これらの記事は読まなくても大丈夫です！！

それでは順を追って説明していきます。

#ローディングの判断を行う変数を設定#

こちらはVuexを利用します。

```store/index.js
export default new Vuex.Store({
  state: {
    loading: true,  //ローディング変数
  },
)}
```

#ローディング開始、終了の関数を設定#

```store/index.js
export default new Vuex.Store({
  state: {
    loading: true,  //ローディング変数
  },
  mutations: {
    startLoading(state) {    //ローディングの開始
      state.loading = false;
    },
    finishLoading(state) {   //ローディングの終了
      state.loading = true;
    }
  },
)}
```

#ローディングコンポーネント#

次は、ローディングが行われるときのコンポーネント、任意のコンポーネントの条件判断を行っていきます。

ローディングコンポーネントについては、説明致しません。なので、気になる方はこちらの記事[【Vue.js】ローディング画面の実装方法（サンプルコード付き）](https://qiita.com/terufumi1122/items/214d82f74370ef377aa2)をご覧ください。

```App.vue
<template>
  <div id="app"> 
      <Header v-show="getLoading"></Header>
      <v-app v-show="getLoading">
        <router-view/>
      </v-app>
      <Footer v-show="getLoading"></Footer>
      <Loading v-show="!getLoading"></Loading>
  </div>
</template>

<script>
  import Header from "../src/components/Header"
  import Footer from "../src/components/Footer"
  import Loading from "../src/components/Loading"
  export default{
    computed: {
      getLoading() {
        return this.$store.state.loading;  //loadingの値の変更を検知
      }
    },
    components: {
      Header,
      Footer,
      Loading
    },
  }
</script>
```

#グローバル関数を設定#

こちらは、mixinを利用して関数をいつでも呼べる機能を使っていきます。

こちらの記事[何回も使う関数を、いつでもどこでも呼び出したい。。。](https://qiita.com/akki-memo/items/0bd31aa31db01e5ab9c4)で説明しているので、是非ご覧ください！

```mixins/globalMethods.js
import store from "../store/index";

export default {
  methods: {
    startLoading() {
      store.commit("startLoading");
    },
    finishLoading() {
      store.commit("finishLoading");
    }
  },
};
```

これで準備は整いました！！！

後は、ここで定義した関数を呼び出すだけ！

#関数の実行#

たとえばログインの処理を行っている時を例に挙げていきます。（firebaseのサインイン``signInWithEmailAndPassword()``機能を使っていきます）

```Login.vue
<template>
  <div class="flex">
    <div class="form-wrapper">
        <h1>ログイン</h1>
        <form>
            <div class="form-item">
            <label for="email"></label>
            <input type="email" name="email" required="required" placeholder="メールアドレス" v-model="email">
            </div>
            <div class="form-item">
            <label for="password"></label>
            <input type="password" name="password" required="required" placeholder="パスワード" v-model="password">
            </div>
            <div class="button-panel">
            <a class="facebook-link" @click="login">
                ログイン
            </a>
            </div>
        </form>
    </div>
  </div>
</template>

<script>
import firebase from "firebase"
export default {
    name: "Login",
    props: ["error"],
    data() {
        return {
            email:"",
            password:"",
        }
    },
    methods: {
        async login() {
          this.startLoading();
          let vm = this;
          await firebase.auth().signInWithEmailAndPassword(this.email, this.password)
          .then((user) => {
              this.$store.dispatch("login", user)
              this.$router.push('/user')
            }
          )
          .catch((error) => {
            alert(error);
            this.$router.go({
              path: vm.$router.currentRoute.path,
              query: {
                error: -1
              },
            })
          })
          this.finishLoading();
      },
    }
}
</script>
```

<font color="red">※非同期処理を行う関数はawaitを付けないと、``this.finishLoading();``がすぐに実行されてしまうため、ローディング画面が表示されません！</font color>

これでいつでもローディング画面を表示することができました！！！

是非、皆さんも使ってください！

以上、「これを知ったら役に立つ！ローディング画面をいつでも出す方法！」でした！！！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading