Bagaimana untuk memantau perubahan data dalam vuex dalam vue

Kaedah untuk Vue memantau perubahan data dalam vuex: Anda boleh mendapatkan data dalam vuex dahulu melalui atribut yang dikira kemudian menggunakan jam tangan untuk memantau perubahan dalam nilai atribut yang dikira, dapatkan nilainya sebelum dan selepas perubahan data, dan membuat pemprosesan yang sepadan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1 Pantau perubahan data vuex dalam fail vue

Mula-mula dapatkan data dalam vuex melalui sifat yang dikira
Kemudian pantau sifat yang dikira melalui menonton The nilai untuk mendapatkan perubahan

<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. Bagaimanakah vue memantau perubahan dalam data vuex dalam fail bukan vue?

Biasanya kami memantau perubahan data dalam fail vue, terutamanya perubahan data dalam vuex Ia sangat mudah melalui fungsi jam tangan, kami boleh mendapatkan nilai sebelum dan selepas perubahan data, dan mengendalikannya dengan sewajarnya.

Namun, tidak mudah apabila kita perlu memantau perubahan data dalam fail seperti js Nasib baik, laman web rasmi vue menyediakan penyelesaian

watch(fn: Function, callback: Function, options. ?: Objek): Fungsi
Kaedah contoh vuex, menerima dua parameter:
Parameter pertama ialah fn, dengar nilai pulangan fn secara responsif dan panggil fungsi panggil balik apabila nilai berubah. fn menerima keadaan kedai sebagai parameter pertama, dan pengambilnya sebagai parameter kedua;
Parameter kedua ialah perwakilan parameter objek pilihan, serupa dengan fungsi panggil balik jam tangan Vue, yang mewakili nilai lama dan baharu.
Apabila kita tidak mahu mendengar, kita boleh menentukan pembolehubah untuk menerima fungsi nilai pulangan kaedah ini, dan memanggil fungsi ini untuk menghentikan pemantauan.

Kelebihan: Kami boleh memantau nilai tertentu yang kami perlukan, dan mendapatkan nilai lama dan baharu dengan mudah seperti dalam fail vue
Kelemahan: Apabila kami perlu mengetahui perubahan banyak nilai yang Anda ada untuk menulis banyak kaedah mendengar (anda boleh mempertimbangkan untuk merangkumnya ke dalam kaedah atau kelas)
Contoh penggunaan:

/* 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);

• Perkenalkan kedai

• Panggil kaedah contoh jam stor Parameter fungsi pertama mengembalikan nilai dalam keadaan yang perlu dipantau (contohnya, jika saya ingin memantau perubahan nama laluan dalam vuex, saya akan. kembalikan nilai ini)

• Parameter kedua adalah sama seperti jam tangan vue, menerima 2 parameter yang mewakili nilai lama dan baharu

• Terima pulangan nilai jam tangan melalui pembolehubah watchFun, memanggil kaedah ini akan menghentikan pemantauan

Di atas ialah cara memantau perubahan dalam data vuex dalam fail bukan vue seperti js.

Seperti yang dinyatakan dalam artikel, apabila jumlah data terlalu besar, adalah tidak mesra untuk menulis berbilang monitor Anda boleh mempertimbangkan untuk melanggan mutasi untuk mengurus jumlah data yang besar.

Cadangan berkaitan: "

tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk memantau perubahan data dalam vuex dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!