Vue 2 のグローバル関数からオブザーバーを返す方法

Question

こんにちは、質問があります。main.js には、API からサイトのリストを取得するグローバル関数 getSites があります。

この関数は async/await を使用して動作し、サイト データを非同期で返します。

また、lockSitesLoading というグローバル変数もあり、API からデータの取得を開始するときに true に設定します。クライアントがサーバーに新しいリクエストを行うのを防ぐためにこの変数が必要です。

最初の関数 getSites では、この変数 lockSitesLoading をチェックする必要があります。それが true の場合は、false に変わるまで監視を開始します。この時点で、getSites を再帰的に呼び出したいと思います。

変数の監視を開始すると、関数は変数が false になるのを待たずに、unknown を返すため、問題はここから始まります。

これが私のコードです:

Component.vue:

async mount() {
    vm = this; とします。
    const sites = await vm.getSites();
    vm.sites = サイト.データ
  },

main.js:

async getSites() {
      vm = this; とします。
      if (vm.$store.state.lockSitesLoading) {
        vm.$watch('$store.state.lockSitesLoading', () => vm.getSites());
      } それ以外 {
        return vm._getSitesOnline();
        //実際にサーバーからデータを取得する関数です
      }

この方法で解決しようとしましたが、うまくいきません。何か案は？

Answer 1

lockSitesLoading = true を設定したかどうかも、どこで設定したかもわかりません。

これは実際の例です。

リーリー リーリー リーリー

Answer 2

基本的には待機する約束が必要です:

リーリー

何らかの理由で lockSitesLoading が実行をブロックすると、メモリ リークが発生することに注意してください。

これを実現するには、コンポジション API と VueUse コンポジションを使用するよりクリーンな方法があるかもしれません。