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

Published on February 16, 2019

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


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


Hinweise vor dem Lesen: Es wird empfohlen, Grundkenntnisse in Vue und Vuex zu haben.


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


Getter sind Teil des Vuex-Repositorys, die die berechneten Daten des aktuellen Status des Repositorys an unsere Komponenten zurückgeben.


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
    }
});

Das 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 Sie sollten das nicht tun. Wir überladen die Anwendung mit diesem Ansatz.


Wenn Sie Daten ohne Änderungen direkt aus dem Repository in die Komponente übertragen müssen, sind Getter nicht die beste Lösung. Als Nächstes werde ich zeigen, wie man den Code verbessern und die unangemessene Verwendung von Gettern loswerden kann.


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


Die Dokumentation lautet wie folgt:


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

Gehen wir zurück zu unserer Komponente und verwenden Sie statt des Getters mapState:


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

Getter aus dem Speicher kann da gelöscht werden wir brauchen ihn nicht mehr:


const store = new Vuex.Store({
    state: {
        // список книг
        books: [
            { id: 1, title: '...', finished: true },
            { id: 2, title: '...', finished: false }
        ]
    }
});

Viel bequemer, nicht wahr? Wir haben unnötige Getter entfernt und die Menge an Code reduziert.


Kapitel 3. Warum brauchen wir Getter, wenn es einen mapState gibt?


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


Lassen Sie uns einen Getter erstellen, um alle Bücher aus dem Tresor lesen zu lassen:


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 so aus:


import { mapState } from 'vuex';
export default {
    computed: {
        // получаем список всех книг
        ...mapState([
            'books'
        ]),
        // получаем список прочитанных книг
        finishedBooks() {
            return this.$store.getters.finishedBooks
        }
    }
}

Sie könnten damit aufhören, aber es gibt noch eine andere nützliche Sache, die es zu wissen gilt. Wenn Sie denselben Getter in verschiedenen Komponenten wiederverwenden müssen, ist es möglicherweise nicht ganz 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 ist offensichtlich: Mit mapGetters haben wir die Menge an Code reduziert.


Sie können auch Informationen aus dem Repository basierend auf einigen Daten berechnen, z. B. um ein Buch anhand seiner ID oder seines Titels zu erhalten. Dies kann erreicht werden, indem das Argument an unseren Getter übergeben wird.


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)
        }
    }
}

Befestigungsmaterial


  • Verwenden Sie Getter, wenn Sie geänderte Informationen aus dem Repository anzeigen möchten (z. B. eine Liste aller gelesenen Bücher). Verwenden Sie andernfalls die Hilfsfunktion mapState.
  • Zusätzliche Argumente können an Getter übergeben werden, um darauf basierende Datenberechnungen durchzuführen.
  • Die Getter-Ergebnisse werden aktualisiert, wenn sich eine der Abhängigkeiten ändert.

Dokumentation für Getter auf Russisch


Beispielanwendung aus dem Artikel über Codepen