Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決

問題の説明:

ページ A と B の 2 つがあり、各ページにはgetList()メソッドがあります。どちらの方法でも同じパラメータ C を渡す必要があり、パラメータ C を選択するプロセスはかなり複雑です。インターフェース A と B を切り替えるときにパラメーター C を繰り返し選択する問題を回避するために、パラメーター C を vuex に保存し、watch を使用して両方のページでパラメーター C をリッスンしgetList()メソッドを実行します。その後、問題が見つかりました。ページ A からページ B に入った後、ページ B でパラメータ C を再度選択すると、ページ A のgetList()メソッドも実行されます。逆に、ページ B からページ A に移動した後、ページ A でパラメータ C を変更すると、ページ B のgetList()メソッドも実行されます。

後で調べたところ、これはキープアライブの使用が原因であることが分かりました。キープアライブは Vue インスタンスを常にメモリ内に保持するため、Vue インスタンスは常に存在し、対応するウォッチャーは常に有効です。関連情報を検索したところ、多くの人がこの問題に遭遇していることがわかりました。最終的に、次の 2 つの解決策を見つけました。

解決策1

ルーターパスによってgetList()実行するかどうかを決定する

時計：
        いくつかの値(新しい値、古い値) {
            if (this.$route.fullPath === 'ページルーティングパス') {
                // 何かをする
            }
        }
    }

解決策2

ページがアクティブ状態かどうかを判断するためのフラグ パラメータを追加します。キープアライブ キャッシュを使用するコンポーネントは、 activatedイベントとdeactivatedイベントのみをトリガーするため、これら 2 つのイベントがトリガーされたときにフラグを true と false に設定します。フラグが true の場合にのみ、 getList()が実行されます。

{
  データ （） {
    戻る {
      アクティブフラグ: false
    };
  },
  時計：
    'someValue'(値) {
      if(val && this.activatedFlag) {
        このリストを取得します。
      }
    }
  },
  アクティブ化（）{
    this.activatedFlag = true;
  },
  非アクティブ化（）{
    this.activatedFlag = false;
  }
}

ページ数が多く、各ページの関数名が一貫していない場合は、上記コードの watch 部分を削除して mixin に記述し、必要なページにインポートすることができます。

  「@/mixin/activeFlag」からactiveFlagをインポートします。

  エクスポートデフォルト{
    ミックスイン: [activeFlag],
    時計：
        'someValue'(値) {
          if(val && this.activatedFlag) {
            this.getlistA();
            this.getlistB();
          }
        }
      },
  }

上記は、vue プロジェクト ウォッチで関数が繰り返しトリガーされる問題に対する 2 つの解決策の詳細です。vue ウォッチ関数が繰り返しトリガーされる問題の解決策の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。