複数の読み込み状態を競合なしで管理できる「vue-wait」

vue-waitとは

vue-waitは、ページ上の複数の読み込み状態を競合なしで管理することができるライブラリです。

IDを使って、開始と終了の紐付けを行うためクロスする待機状態を設定することが可能です。

環境

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install vue-wait

yarn

yarn add vue-wait

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-wait.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/f/vue-wait

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 [注意]モジュール版は未検証です。

import VueWait from 'vue-wait'

（2）WEBページの場合

const VueWait = window['VueWait'].default;

2.メソッドを設定

上記で取得したVueWaitを Vue.use プロパティに取り込みます。

$wait.start が待機を開始させるメソッドです。
$wait.end が待機を終了させるメソッドです。

それぞれ引数のIDを使って結びつけます。
今回は、myLoad1 をIDとして使用します。

Vue.use(VueWait);

new Vue({
  el: '#app',
  wait: new VueWait(),
  data: {
    myList: []
  },
  methods: {
    load: async function() {
      let self = this;
      this.myList = [];
      //待ち開始
      this.$wait.start('myLoad1');
      //リストの設定
      this.myList = await new Promise(function(resolve){
        setTimeout(function(){
          let mockData = [];
          for(let i=0; i<10; i++){
            mockData.push(i);
          }
          return resolve(mockData);
        }, 3000);
      });
      //待ち終了
      this.$wait.end('myLoad1');
    }
  },
  created: function(){
    this.load();
  }
});

3. テンプレートを準備

$wait.any は、ページにローダーが存在する場合、ブール値を返します。
<v-wait> のforプロパティに上記の myLoad1をIDとして設定すると、 $wait.end するまで待機させます。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <div v-if="$wait.any">
    リストの読み込み中・・・
  </div>
  <v-wait for="myLoad1">
    <button @click='load'>再読み込み</button>
    <ul>
      <li v-for="item in myList">{{ item }}</li>
    </ul>
  </v-wait>
</div>

サンプル

>>専用ページで確認する

さいごに

ページ上の複数の読み込み状態を競合なしで管理することができるライブラリでした。

実際にサンプルを作るまでは意味がわからなすぎましたが、使ってみたらめちゃくちゃ便利なライブラリでした。

くるくる回るローダーだけではなく、バーのローダーにも使えそうな気がします。

今日はこの辺でー