vue-infinite-loadingで無限ローディングされる

問題点

データベースからデータを5件ずつ取得して、vue-infinite-loadingで無限スクロールすることを想定。
しかし、以下のようにすると無限に繰り返されてしまった。

a.vue

    infiniteHandler($state) {
      if(!this.$store.getters.isAllTask) {
        this.$store.dispatch('getTasks');
        $state.loaded();
      } else {
        $state.complete();
      }
    },

解決策

非同期処理にすれば良い。

async infiniteHandler($state) {                   // async追加
      if(!this.$store.getters.isAllTask) {
        // 非同期にしないと無限ローティングするので注意
        await this.$store.dispatch('getTasks');   // await追加
        $state.loaded();
      } else {
        $state.complete();
      }
    },

async/awaitじゃなくても
・公式リファレンスのように.then()の中に記載する
https://peachscript.github.io/vue-infinite-loading/guide/start-with-hn.html
・Promiseを使用する
でも対応可能。

おわりに

公式リファレンスのように.then()とするのがわかりやすいと思うが、私の場合Vuexを使用していたりaxios用ファイルを作っているので個人的にasync/awaitの方がやりやすい。もっと良い方法があるのだろうか。。