Vue.js Vuexで描画状態を管理するウエイト画面を作ってみた

概要

リクエストなどの長い処理で、処理待ちをする際に表示するウエイト画面をコンポーネント化し、
Vuexで状態管理をするように実装したときのメモ。

環境

• Vue.js 2.6.10
• Vuex 3.1.2

ウエイト画面

まずはウエイト画面のコンポーネントを実装。

waitingLoader.vue

<template>
  <div class="loader-backdrop">
    <span class="loading">Loading...</span>
  </div>
</template>
<script>
export default {};
</script>
<style>
.loader-backdrop {
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  text-align: center !important;
  position: fixed;
  top: 0;
  left: 0;
}
.loading {
  color: white;
  animation: flash 1.5s linear infinite;
}
@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
</style>

Vuexでの描画状態管理

Vuexの定義部分

• isWaitingShowで描画状態を管理する
• waitingShow、waitingHideで描画状態を切り替える

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false

Vue.use(Vuex);
const store = new Vuex.Store({
  modules: {
    common: {
      state: {
        isWaitingShow: false
      },
      mutations: {
        waitingShow(state) {
          state.isWaitingShow = true;
        },
        waitingHide(state) {
          state.isWaitingShow = false;
        }
      },
      actions: {},
      getters: {}
    }
  }
});

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

画面部分の実装

• this.$store.commit("waitingShow") でウエイト画面を表示
• this.$store.commit("waitingHide") でウエイト画面を非表示
• 今回はサンプルのため、ボタンクリック時に表示し、1秒後に非表示になるような実装

App.vue

<template>
  <div id="app">
    <waitingLoader v-if="$store.state.common.isWaitingShow" />
    <button @click="onShow">ウエイト画面表示</button>
  </div>
</template>

<script>
import waitingLoader from "./components/waitingLoader/waitingLoader.vue";

export default {
  name: "app",
  components: {
    waitingLoader
  },
  methods: {
    onShow() {
      this.$store.commit("waitingShow");
      const self = this;
      setTimeout(function() {
        self.$store.commit("waitingHide");
      }, 1000);
    }
  }
};
</script>

<style>
</style>

まとめ

こういった画面を実装するときは大体共通化すると思う。

共通化しやすい部分に処理や状態をまとめられると何かとアクセスしやすくなると思い、
Vuexで管理するようにしてみたのが今回の実装。