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

ElementUI implementiert kaskadierenden Selektor

Artikel

Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten

Artikel

Implementierung der Remote-Linux-Entwicklung mit vscode

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

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

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

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

2.2 Aufruf des Getters im Root Store des Mappings

ElementUI implementiert kaskadierenden Selektor

Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten

Implementierung der Remote-Linux-Entwicklung mit vscode

IIS7 IIS8 http springt automatisch zu HTTPS (Port 80 springt zu Port 443)

MySQL-Optimierung: Join statt Unterabfrage verwenden

Vue + Openlayer realisiert den Drag- und Rotationsverformungseffekt von Grafiken

Codeanalyse von Benutzervariablen in MySQL-Abfrageanweisungen

Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her

jQuery implementiert gleitende Registerkarte

Löschen von zwei Bildern mit derselben ID im Docker

Artikel empfehlen

Fragen zum Vorstellungsgespräch zum MySQL-Datenbankindex (grundlegende Programmierkenntnisse)

Lösungen für das Problem der Tabellenschachtelung und Rahmenzusammenführung

Analyse des Consul-Konfigurationsprozesses für die Docker-Bereitstellung

Erklärung der CAST- und CONVERT-Funktionen zur Typkonvertierung in MySQL-Datenbanken

Detaillierte Erläuterung der Verwendung der Drag & Drop-Zoom-Komponente für Vue-Bilder

Detaillierte Erklärung der Speicher-Engine in MySQL

Detaillierte Einführung in TABLE-Tags (TAGS)

Zwei Methoden der MySql-Kommaverkettungs-Stringabfrage

MySql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „OR“

Lösen Sie das Problem, dass die Methoden der document.getElementBy-Reihe keine Objekte abrufen können

Detaillierte Erklärung des Prinzips und der Verwendung des Cursors (DECLARE) in der gespeicherten MySQL-Prozedur

So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit

Implementierung der Elementzeitleiste

Informationen zu aufgetretenen Browserkompatibilitätsproblemen und Lösungen (empfohlen)

Detaillierte Erklärung zum Schreiben und Verwenden von Makefile unter Linux