vuex のデータ変更を vue で監視する方法

vue が vuex 内のデータの変更を監視する方法: まず、計算された属性を通じて vuex 内のデータを取得できます。次に、watch を使用して計算された属性の値の変化を監視し、値を取得します。データ変更の前後で、対応する変更処理を行います。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

1. vue ファイル内の vuex のデータ変更を監視します

最初に計算されたプロパティを通じて vuex のデータを取得します
次に、watch Value を通じて計算されたプロパティを監視します変更を取得するには

<script>
import { mapGetters } from &#39;vuex&#39;
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(["mapboxMap"]),
    mapboxMap1() {
      // return this.$store.state.mapbox.map;
      return this.mapboxMap;
    }
  },
  watch: {
    mapboxMap1(newData, oldData) {
     
    }
  },
}
</script>

2. vue は、vue 以外のファイル内の vuex データの変更をどのように監視しますか?

通常、vue ファイルのデータ変更、特に vuex のデータ変更を監視しますが、watch 関数を使用してデータ変更前後の値を取得し、それに応じて処理すると非常に便利です. .

しかし、js などのファイルのデータ変更を監視する必要がある場合、それは簡単ではありません。幸いなことに、vue 公式 Web サイトには解決策が提供されています。

watch(fn: Function, callback: Function, options ?: オブジェクト): Function
vuex のインスタンス メソッド、2 つのパラメーターを受け取ります:
最初のパラメーターは fn で、それに応答して fn の戻り値をリッスンし、値が変化したときにコールバック関数を呼び出します。 fn はストアの状態を最初のパラメータとして受け取り、そのゲッターを 2 番目のパラメータとして受け取ります。
2 番目のパラメータは、vue のウォッチのコールバック関数に似たオプションのオブジェクト パラメータ表現で、古い値と新しい値を表します。
リッスンしたくない場合は、このメソッドの戻り値関数を受け取る変数を定義し、この関数を呼び出して監視を停止できます。

利点: 必要な特定の値を監視し、vue ファイルのように古い値と新しい値を非常に便利に取得できます。
欠点: 多くの値の変更を知る必要がある場合多数の監視メソッドを作成する (メソッドまたはクラスにカプセル化することを検討できます)
使用例:

/* eslint-disable */
import store from "../store/index";

const watchFun = store.watch(
    state => state.pathName,
    (newValue, oldValue) => {
        console.log("search string is changing");
        console.log("rd: newValue", newValue);
        console.log("rd: oldValue", oldValue);
    }
);

setTimeout(() => {
    watchFun();
}, 10000);

• store を対応する js ファイルに導入します

• ストアの監視インスタンス メソッドを呼び出します。最初の関数パラメータは、監視する必要がある状態の値を返します (たとえば、vuex で pathName の変更を監視したい場合は、この値を返します) )

• 2 番目のパラメーターは vue の watch と同じで、古い値と新しい値を表す 2 つのパラメーターを受け取ります

• 変数 watchFun を介して監視し、このメソッドを呼び出すと監視が停止します

上記は、js などの vue 以外のファイル内の vuex データの変更を監視する方法です。

記事で述べた欠点と同様に、データ量が大きすぎる場合、複数のモニターを作成するのは不親切です。大量のデータを管理するには、ミューテーションのサブスクライブを検討できます。

関連する推奨事項: 「vue.js チュートリアル 」

以上がvuex のデータ変更を vue で監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。