Detaillierte Erklärung der grundlegenden Verwendung der Hilfsfunktion MapGetters in Vuex

Detaillierte Erklärung der grundlegenden Verwendung der Hilfsfunktion MapGetters in Vuex

Hilfsfunktion mapGetters

mapGetters ordnet die Getter im Store einfach den lokal berechneten Eigenschaften zu:

1. Verwenden Sie mapGetter nicht, um den Getter in vuex in der Komponente oder Schnittstelle aufzurufen

1.1 Rufen Sie den Getter im Stammspeicher des Mappings auf

<!-- test.vue -->
<Vorlage>
  <div Klasse="vuexResponse">
    <div @click="changeVal">Klick</div>
    <div>"stateHello: "{{stateHello}}</div>
    <div>"gettersHello: "{{gettersHello}}</div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  betrachten:
    gettersHello(newVal, oldVal) {
      console.log("gettersHallo neuesVal", neuesVal);
      console.log("gettersHallo altesVal", altesVal);
    }
  },
  berechnet: {
    ZustandHallo() {
      gib dies zurück.$store.state.stateHallo
    },
    gettersHello() {
      gib dies zurück.$store.getters.gettersHallo
    }
  },
  Methoden: {
    changeVal() {
      dies.$store.commit("mutationsHallo", 2)
    }
  }
}
</Skript>
/**
 * store.js
 */
Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)
exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    ZustandHallo: 1
  },
  Getter: {
    GetterHallo: (Status) => {
      returniere state.stateHello * 2
    }
  },
  Mutationen:
    mutationsHello(Zustand, Wert) {
      konsole.log("Wert", Wert); // 2
      Zustand.stateHello += val
    }
  },
})

Vorgang: Klicken Sie, um changeVal() in der Schnittstelle test.vue aufzurufen. Die Methode changeVal übergibt den Parameter val durch committe und ruft die Methode mutationsHello() in store.js auf. Die Methode mutationsHello ändert den Wert von stateHello in state. Der Wert von stateHello wird in gettersHello von Gettern überwacht. Die Änderung des Werts von stateHello löst gettersHello aus. In der berechneten Schnittstelle test.vue wird store.getters.gettersHello berechnet, wodurch gettersHello dem Wert von store.gettes.gettersHello zugeordnet wird. GettersHello wird über die Vorlage in das Dom gerendert. Gleichzeitig kann die Änderung von gettersHello auch gettersHello in watch auslösen, wodurch die Datenänderungen von store.getters.gettersHello überwacht werden.

1.2 Rufen Sie den Getter im Modulspeicher des Mapping-Moduls auf

<!-- moduleTest.vue -->
<Vorlage>
  <div Klasse="vuexResponse">
    <div @click="changeVal">Klick</div>
    <div>ZustandHallo: {{ZustandHallo}}</div>
    <div>gettersHello: {{gettersHello}}</div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  betrachten:
    gettersHello(newVal, oldVal) {
      console.log("gettersHallo neuesVal", neuesVal);
      console.log("gettersHallo altesVal", altesVal);
    }
  },
  berechnet: {
    ZustandHallo() {
      gib dies zurück.$store.state.vuexTest.stateHallo
    },
    gettersHello() {
      gib dies zurück.$store.getters['vuexTest/gettersHello']
    }
  },
  Methoden: {
    changeVal() {
      dies.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</Skript>
/**
 * Modul vuexTest.js
 */
Standard exportieren {
    Namespace: wahr,
    Zustand: {
        ZustandHallo: 1,
    },
    Getter: {
        gettersHello: (Status, Getter, Root-Status, Root-Getter) => {
            console.log("Status", Status);
            console.log("Getter", Getter);
            console.log("Wurzelstatus", Wurzelstatus);
            console.log("rootGetters", rootGetters);
            returniere state.stateHello * 2
        }
    },
    Mutationen:
        mutationsHello(Zustand, Wert) {
            konsole.log("1111");
            Konsole.log("Wert", Wert);
            Zustand.stateHello += val
        }
    },
    Aktionen: {

    }
}

Es ist zu beachten, dass sich die Methode zum Berechnen der Getter im Mapping-Modul in „Berechnet“ von der Methode zum Abrufen der Daten im Status des Moduls unterscheidet.

dies.$store.getters['vuexTest/gettersHello']

2. Verwenden Sie mapGetter, um den Getter in vuex in der Komponente oder Schnittstelle aufzurufen

2.1 Rufen Sie den Getter im Stammspeicher des Mappings auf

/**
 * store.js
 */
 Vue von „vue“ importieren
 Vuex von „vuex“ importieren
 
 Vue.Verwenden(Vuex)
 exportiere standardmäßig neuen Vuex.Store({
   Zustand: {
     ZustandHallo: 1
   },
   Getter: {
     GetterHallo: (Status) => {
       returniere state.stateHello * 2
     }
   },
   Mutationen:
     mutationsHello(Zustand, Wert) {
       Zustand.stateHello += val
     }
   },
 })
<!-- Test.vue -->
<Vorlage>
  <div Klasse="vuexResponse">
    <div @click="changeVal">Klick</div>
    <div>ZustandHallo: {{ZustandHallo}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</Vorlage>

<Skript>
importiere { mapGetters } von "vuex";
Standard exportieren {
  Name: "vuexReponse",
  Komponenten:

  },
  Daten() {
    zurückkehren {

    }
  },
  betrachten:
    gettersHello(newVal, oldVal) {
      console.log("gettersHallo neuesVal", neuesVal);
      console.log("gettersHallo altesVal", altesVal);
    }
  },
  berechnet: {
    ZustandHallo() {
      gib dies zurück.$store.state.stateHallo
    },
    ...mapGetters(["gettersHello"]), // Array-Form ...mapGetters({ // Objektform gettersHello: "gettersHello"
    }),
    ...mapGetters({
      gettersHelloOther: "gettersHello" // Ändere die Zuordnung in Objektform }),
  },
  Methoden: {
    changeVal() {
      dies.$store.commit("mutationsHallo", 2)
    }
  }
}
</Skript>

2.2 Aufruf des Getters im Root Store des Mappings

/**
 * vuexTest.js
 */
 Standard exportieren {
    Namespace: wahr,
    Zustand: {
        ZustandHallo: 1,
    },
    Getter: {
        gettersHello: (Status, Getter, Root-Status, Root-Getter) => {
            console.log("Status", Status);
            console.log("Getter", Getter);
            console.log("Wurzelstatus", Wurzelstatus);
            console.log("rootGetters", rootGetters);
            returniere state.stateHello * 2
        }
    },
    Mutationen:
        mutationsHello(Zustand, Wert) {
            konsole.log("1111");
            Konsole.log("Wert", Wert);
            Zustand.stateHello += val
        }
    },
    Aktionen: {

    }
}
<!-- Modul test.vue -->
<Vorlage>
  <div Klasse="vuexResponse">
    <div @click="changeVal">Klick</div>
    <div>ZustandHallo: {{ZustandHallo}}</div>
    <div>gettersHello: {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</Vorlage>

<Skript>
importiere { mapGetters } von "vuex";
Standard exportieren {
  Name: "vuexReponse",
  betrachten:
    gettersHello(newVal, oldVal) {
      console.log("gettersHallo neuesVal", neuesVal);
      console.log("gettersHallo altesVal", altesVal);
    }
  },
  berechnet: {
    ZustandHallo() {
      gib dies zurück.$store.state.vuexTest.stateHallo
    },
    ...mapGetters(["vuexTest/gettersHello"]), // Array-Form...mapGetters("vuexTest", { // Objektform gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // Ändere die Zuordnung in Objektform }),
  },
  Methoden: {
    changeVal() {
      dies.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</Skript>
Diese drei Formen ... mapGetters(["vuexTest/gettersHello"]), // Array-Form ... mapGetters("vuexTest", { // Objektform gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // Ändere die Zuordnung in Objektform }),

Damit ist dieser Artikel über die grundlegende Verwendung der Hilfsfunktion mapGetters in vuex abgeschlossen. Weitere relevante Inhalte zur Verwendung von vuex mapGetters finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der Getter-Berechnung und Filtervorgänge in Vuex
  • Sprechen Sie über die spezifische Verwendung der Getter-Attribute von Vuex
  • Verwendung von mapState, mapGetters, mapActions und mapMutations in vuex
  • Detaillierte Erklärung der Getter-Verwendung in vuex
  • Zusätzliche Anweisungen zur Verwendung von Gettern und Aktionen in Vuex

<<:  Verstehen von MySQL-Deadlock-Routinen durch eindeutige Index-S-Sperre und X-Sperre

>>:  So verbergen und fälschen Sie die Versionsnummer in Nginx

Artikel empfehlen

Beheben Sie das Kompatibilitätsproblem zwischen dem MySQL 8.0-Treiber und der Alibaba Druid-Version

Dieser Artikel stellt hauptsächlich die Lösung fü...

Dockerfile echo gibt die Methode zum Implementieren mehrerer Textzeilen in der angegebenen Datei an

Fügen Sie der angegebenen Datei im Dockerfile meh...

So installieren und implementieren Sie einen Gitlab-Server auf CentOS7

Ich verwende hier das 64-Bit-System CentOS 7. Ich...

Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards

Die goldene Regel Befolgen Sie immer die gleichen...

Womit kann ich dich, meinen Tisch, retten (Haiyu-Blog)

Tabellen spielten einst eine sehr wichtige Rolle ...

8 wichtige JavaScript-Codefragmente für Ihr Projekt

Inhaltsverzeichnis 1. Holen Sie sich die Dateierw...

Zusammenfassung der Techniken zur Implementierung komplexer Seitenlayouts mithilfe von Framesets

Code kopieren Der Code lautet wie folgt: <html...

Detaillierter Prozess der Bereitstellung von Docker für WSL2 in IDEA

Die lokale Umgebung ist Windows 10 + WSL2 (Ubuntu...

Beispielimplementierung der Überprüfung, ob ein Objekt leer ist, in nativem JavaScript

Inhaltsverzeichnis Was ist natives JavaScript A. ...

Detaillierte Erklärung der grundlegenden Verwendung von MySQL-Triggern [Erstellen, Anzeigen, Löschen usw.]

Inhaltsverzeichnis 1. MySQL-Trigger erstellen: 1....

Analyse der Prinzipien der MySQL Slow Query-bezogenen Parameter

MySQL Slow Query, dessen vollständiger Name „Slow...

Verstehen Sie die Verwendung von benutzerdefinierten Anweisungen für Vue2.x und Vue3.x und das Prinzip der Hook-Funktionen

Inhaltsverzeichnis Vue2.x-Nutzung Globale Registr...

Installieren Sie Redis und MySQL auf CentOS

1|0MySQL (MariaDB) 1|11. Beschreibung Das Datenba...

Tutorial zur Installation und Deinstallation von Python3 unter Centos7

1. Installieren Sie Python 3 1. Installieren Sie ...

Installieren Sie den Quellcode der MySQL-Datenbank 5.6 unter Linux und ändern Sie das Anmeldebenutzerkennwort

In diesem Artikel wird hauptsächlich die Installa...