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

Hexadezimale Farbcodes (vollständig)

Rot und Pink und ihre Hexadezimalcodes. #990033 #...

Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen

1. Installieren Sie Tomcat 1. Suchen Sie das Tomc...

Der Unterschied sowie die Vor- und Nachteile des MySQL-Primärschlüssels UUID und des automatisch inkrementierten Primärschlüssels

Einführung Ich habe eine Zeit lang die PostgreSQL...

MySQL-Experiment: Verwenden von Explain zur Analyse des Indextrends

Überblick Die Indizierung ist eine Fähigkeit, die...

Beispielcode für nahtloses Scrollen mit Flex-Layout

In diesem Artikel wird hauptsächlich der Beispiel...

HTML-Hyperlinks im Detail erklärt

Hyperlink Hyperlinks sind die am häufigsten verwen...

Axios storniert Anfragen und vermeidet doppelte Anfragen

Inhaltsverzeichnis Herkunft Status Quo Anfrage ab...

Linux-Methodenbeispiel zum Anzeigen aller Informationen des Prozesses

Auf dem Server läuft ein Taskprozess. Wenn wir ih...

Beispielcode mit Vue-Router in HTML

Einführung in Vue und Vue-Router <script src=&...

Führen Sie die Schritte aus, um den Fehler 403 Forbidden in Nginx zu beheben.

Die Webseite zeigt 403 Forbidden an Nginx (Yum-In...

Sonderzeichen in HTML anzeigen (mit Sonderzeichen-Korrespondenztabelle)

Reproduktion des Problems Beim Bearbeiten mit HTM...

Probleme mit dem benannten Mount und dem anonymen Mount des Docker-Container-Datenvolumens

Inhaltsverzeichnis Was ist ein Containerdatenvolu...

Implementierung eines laufenden Springboot-Projekts mit Docker

Einführung: Die Konfiguration von Docker, auf dem...

Tipps zum Listenaufbau für Website-Wartungsseiten

Und oft ist es für Wartungsarbeiten erforderlich, ...

Ist das Tag „li“ ein Blockelement?

Warum kann es die Höhe festlegen, aber im Gegensat...