Comment surveiller les modifications des données dans vuex dans vue

Comment vue surveille les modifications des données dans vuex : vous pouvez d'abord obtenir les données dans vuex via l'attribut calculé ; puis utiliser watch pour surveiller les modifications de la valeur de l'attribut calculé, obtenir les valeurs avant et après la modification des données, et procéder en conséquence.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

1. Surveillez les modifications des données de vuex dans le fichier vue

Obtenez d'abord les données dans vuex via les propriétés calculées
Utilisez ensuite watch pour surveiller les valeurs​​dans les propriétés calculées pour obtenir les modifications

<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. Comment fonctionne vue ? Surveiller les modifications des données vuex dans les fichiers non-vue ?

Habituellement, nous surveillons les changements de données dans les fichiers vue, en particulier les changements de données dans vuex, il est très pratique d'utiliser la fonction watch pour obtenir les valeurs avant et après le changement de données et les gérer en conséquence.

Cependant, ce n'est pas facile lorsque nous devons surveiller les modifications des données dans des fichiers tels que js Heureusement, le site officiel de vue propose des solutions

watch(fn: Function, callback: Function, options?: Object): La méthode d'instance. de Function
vuex reçoit deux paramètres :
Le premier paramètre est fn, écoute la valeur de retour de fn en réponse et appelle la fonction de rappel lorsque la valeur change. fn reçoit l'état du magasin comme premier paramètre et son getter comme deuxième paramètre ;
Le deuxième paramètre est une représentation facultative du paramètre d'objet, similaire à la fonction de rappel de la montre de Vue, représentant les anciennes et les nouvelles valeurs.
Lorsque nous ne voulons pas écouter, nous pouvons définir une variable pour recevoir la fonction de valeur de retour de cette méthode, et appeler cette fonction pour arrêter la surveillance.

Avantages : nous pouvons surveiller une valeur spécifique dont nous avons besoin et obtenir les anciennes et les nouvelles valeurs très facilement, comme dans un fichier vue.
Inconvénients : lorsque nous avons besoin de connaître les changements de nombreuses valeurs, nous devons écrire beaucoup de méthodes de surveillance (Vous pouvez envisager de l'encapsuler dans une méthode ou une classe)
Exemple d'utilisation :

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

• Introduisez le magasin dans le fichier js correspondant

• Appelez la méthode d'instance watch du magasin, et le premier paramètre de fonction renvoie une valeur dans l'état qui doit être surveillé (Par exemple, si je veux surveiller le changement de pathName dans vuex, je retournerai cette valeur)

• Le deuxième paramètre est le même que la montre de vue, recevant 2 paramètres représentant les anciennes et les nouvelles valeurs

• Recevez la valeur de retour de la montre via la variable watchFun , l'appel de cette méthode arrêtera la surveillance

Ce qui précède explique comment surveiller les modifications des données vuex dans des fichiers non-vue tels que js.

Comme mentionné dans l'article, lorsque la quantité de données est trop importante, il n'est pas convivial d'écrire sur plusieurs moniteurs. Vous pouvez envisager de vous abonner à des mutations pour gérer de grandes quantités de données.

Recommandations associées : "Tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!