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

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-wait.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const VueWait = window['VueWait'].default;
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();
  }
});