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

So verwenden Sie die HTML 5 Drag & Drop-API in Vue

Die Drag & Drop-API fügt ziehbare Elemente zu...

Webseiten in Schwarzweiß umwandeln (kompatibel mit Google, Firefox, IE und anderen Browsern)

In die CSS-Datei schreiben Code kopieren Der Code ...

Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels

Beim Erstellen eines Zeitfelds STANDARD CURRENT_T...

Lösung für das Problem, dass MySql immer das mySqlInstallerConsole-Fenster öffnet

MySql öffnet regelmäßig ein MySQLInstallerConsole...

Eine kurze Diskussion über drei Methoden der asynchronen Replikation in MySQL 8.0

In diesem Experiment konfigurieren wir die standa...

Verwenden Sie das Rem-Layout, um eine adaptive

Ich habe bereits einen Artikel über mobile Anpass...

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Wichtige Erkenntnisse: 1. Beherrschung der CSS3-3...

Webprojektentwicklung VUE-Mischungs- und Vererbungsprinzip

Inhaltsverzeichnis Mischen Mixin-Hinweis (doppelt...

Beim Hinzufügen einer Windows 2008-Server-Subdomäne zu einer übergeordneten Domäne wird eine Fehlermeldung angezeigt: Die Domäne existiert bereits

Beim Hinzufügen einer Windows 2008-Server-Subdomä...

Benutzerdefinierte optionale Zeitkalenderkomponente von Vue

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel zum Verlassen der Schleife in Array.forEach in js

Inhaltsverzeichnis forEach() Methode So springen ...

mysql5.7.21.zip Installations-Tutorial

Der detaillierte Installationsprozess von mysql5....

Delegieren von Berechtigungen in Linux mit Sudo

Einführung in die Sudo-Autoritätsdelegierung su-S...

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

Dieser Artikel beschreibt anhand von Beispielen d...

Was sind die Kernmodule von node.js

Inhaltsverzeichnis Globales Objekt Globale Objekt...