Vuex - übermäßiger Einsatz von Gettern in der Anwendung. Fehler beim Parsen

In diesem Artikel wird ein häufiger Fehler erläutert, den die meisten Anfänger bei der Entwicklung einer Anwendung auf Vue + Vuex machen. Wir werden über Getter sprechen und wie man sie richtig benutzt. Wir werden uns auch die Hilfsfunktionen mapState und mapGetters ansehen.

Vor dem Lesen: Es wird empfohlen, dass Sie über Grundkenntnisse in Vue und Vuex verfügen.

Kapitel 1. Was sind Getter? Beispiel für eine unangemessene Verwendung

Getter sind Teil des Vuex-Repositorys, das berechnete Daten über den aktuellen Status des Repositorys an unsere Komponenten zurückgibt.

Betrachten Sie ein Beispiel:

const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     books: state => state.books } }); 

Dies sieht aus wie eine Komponente mit einer Liste aller Bücher:

 export default { computed: { //   books() { return this.$store.getters.books } } } 

Das obige Beispiel funktioniert, aber es lohnt sich nicht. Mit diesem Ansatz überlasten wir die Anwendung.

Wenn Sie Daten ohne Änderungen direkt aus dem Speicher an die Komponente ausgeben müssen, sind Getter nicht die beste Lösung. Als nächstes werde ich zeigen, wie Sie den Code verbessern und die unangemessene Verwendung von Gettern beseitigen können.

Kapitel 2. Verwenden von mapState zum Abrufen von Daten aus dem Speicher

Die Dokumentation lautet:

Wenn eine Komponente viele Eigenschaften oder Warehouse-Getter verwenden muss, kann es mühsam sein, alle diese berechneten Eigenschaften zu deklarieren. In solchen Fällen können Sie die mapState- Funktion verwenden, die automatisch berechnete Eigenschaften generiert.

Kehren wir zu unserer Komponente zurück und verwenden mapState anstelle eines Getters:

 import { mapState } from 'vuex'; export default { computed: { ...mapState([ 'books' ]) } } 

Ein Getter aus dem Repository kann gelöscht werden, weil wir brauchen ihn nicht mehr:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] } }); 

Viel bequemer, oder? Wir haben unnötige Getter beseitigt und die Menge an Code reduziert.

Kapitel 3. Warum Getter, wenn es mapState gibt

Und trotzdem werden sie gebraucht. Getter werden in Fällen verwendet, in denen Sie geänderte Informationen aus dem Repository anzeigen müssen (z. B. eine Liste aller gelesenen Bücher).

Erstellen wir einen Getter, um alle Bücher aus dem Repository zu lesen:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); } } }); 

Jetzt sieht unsere Komponente folgendermaßen aus:

 import { mapState } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //     finishedBooks() { return this.$store.getters.finishedBooks } } } 

Man könnte damit aufhören, aber es gibt noch eine nützliche Sache, die es wert ist, gewusst zu werden. Wenn Sie denselben Getter in verschiedenen Komponenten wiederverwenden müssen, ist es möglicherweise nicht sehr praktisch, Getter jedes Mal in der berechneten Methode zu schreiben. MapGetters kommt zur Rettung .

Schauen wir uns ein Beispiel an:

 //     import { mapState, mapGetters } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //   ,   //       ...mapGetters([ 'finishedBooks' ]) } } 

Die Verbesserung liegt auf der Hand: Mit mapGetters haben wir die Codemenge reduziert.

Sie können Informationen aus dem Repository auch anhand einiger Daten berechnen, z. B. ein Buch anhand seiner ID oder seines Namens abrufen. Dies kann erreicht werden, indem wir unserem Getter ein Argument übergeben.

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); }, //    id getBookById: (state) => (id) => { return state.books.find(books => books.id === id) } } }); 

 import { mapState, mapGetters } from 'vuex'; export default { computed: { ...mapState([ 'books' ]), ...mapGetters([ 'finishedBooks', 'getBookById' ]), getBook() { //    id === this.id return this.getBookById(this.id) } } } 

Materialbefestigung

• Verwenden Sie Getter, wenn Sie geänderte Informationen aus dem Repository anzeigen müssen (z. B. eine Liste aller gelesenen Bücher). In anderen Fällen verwenden Sie die MapState-Hilfsfunktion.
• Gettern können zusätzliche Argumente übergeben werden, um darauf basierende Daten zu berechnen.
• Getter-Ergebnisse werden aktualisiert, wenn sich eine der Abhängigkeiten ändert.

Getter Dokumentation in russischer Sprache

Beispielanwendung aus einem Artikel über Codepen