Vuex bietet praktische Tools für die Arbeit mit Daten, aber einige Entwickler verwenden sie nicht immer für den beabsichtigten Zweck oder erstellen redundante Konstruktionen, bei denen es möglich war, klarer und prägnanter zu schreiben. Dies geschieht auch, wenn ein Entwickler nur mit diesen Tools vertraut ist. Dieser Artikel enthält einige Richtlinien für die Organisation von Gettern, die Sie auf Ihre Arbeit anwenden können.
Getter sind Teil des Vuex-Repositorys, insbesondere berechnete Eigenschaften. Mit ihnen können Sie beispielsweise Daten empfangen, die nach bestimmten Parametern gefiltert sind. Einige Entwickler nehmen den Namen dieses Tools jedoch wörtlich und verwenden es als Ersatz für das direkte Abrufen von Daten aus dem Status . Ab hier folgt der erste Fehler bei der Verwendung von Gettern.
Verwenden von Gettern zum einfachen Abrufen von Daten aus dem Speicher
Schauen wir uns ein einfaches Codebeispiel an:
state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, },
Diese Verwendung von Gettern ist häufig genug und das ist schlecht. Um auf den Status in Ihrer Komponente zuzugreifen, geben Sie einfach einen berechneten Wert in berechnet ein, zum Beispiel:
computed: { films() { return this.$store.state.films; }, },
Oder eine noch bequemere Option mit mapState:
computed: { ...mapState(['films']), },
Nehmen Sie eine solche Methode zum Abrufen von Daten an, dann werden Sie Ihren Code nicht mit überflüssigem Code überladen.
IMHO: Viele mischen mit mapState und erstellen berechnete Werte, die einen Status zurückgeben. Um einen einheitlichen Code zu erstellen, verwenden Sie mapState und den Rest der Tools auch für einen Wert, da Ihr Code einheitlicher wird und Sie Änderungen viel schneller und bequemer vornehmen können, beispielsweise wenn Sie einen weiteren Wert anzeigen müssen.
Erstellen Sie einen Getter für einen einzelnen Anwendungsfallfilter
Angenommen, Sie benötigen einen James-Bond-Film. In einem bestimmten Fall möchten Sie möglicherweise Folgendes tun:
getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, },
Sie müssen dies nicht tun. Wenden Sie sich erneut an mapState und gehen Sie wie folgt vor:
computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), },
Tatsächlich übertragen Sie einfach einen bestimmten Filter auf Ihre Komponente, wo er benötigt wird. Das Beispiel ist sehr abstrakt, aber ich habe ihn in der Praxis oft getroffen.
Erstellen Sie Getter mit Parametern
Diese Art der Arbeit mit Gettern ist sehr praktisch und üblich, aber wir dürfen nicht vergessen, dass Getter berechnete Eigenschaften sind und zwischengespeichert werden. Dies bedeutet nicht, dass Sie es überhaupt nicht verwenden können, aber es ist besser, noch einmal darüber nachzudenken, ob es anders sein könnte. Schauen Sie sich ein Beispiel an:
getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, },
Tatsache ist, dass Sie bei einem solchen Anruf sagen, dass Sie jedes Mal das Ergebnis des Getters neu berechnen und es Ihnen dann geben müssen. Wenn diese Struktur zusammengebaut werden muss, können Sie Folgendes tun:
getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, },
In diesem Fall erfolgt die Neuberechnung nur bei Datenänderungen, und Sie können id als Schlüssel des Objekts bezeichnen.
Zusammenfassend
- Verwenden Sie keine Getter zum einfachen Abrufen von Daten. Sie müssen Ihren Code nicht mit Wrappern für einfache Vorgänge komplizieren
- Erstellen Sie keine Getter für bestimmte Filter, die nur einmal benötigt werden. Die Hauptidee von Getter besteht darin, abgeleitete Zustände zu erhalten, aber Sie müssen die Komponentenlogik nicht in die Speicherlogik übertragen
- Parametrisierte Getter verlieren ihre Haupteigenschaft - die Cachefähigkeit. Denken Sie ein paar Mal darüber nach, bevor Sie sie auf diese Weise verwenden
- Nutzen Sie mapState in vollem Umfang und denken Sie daran, dass die meisten spezifischen Aufgaben für eine Komponente damit ausgeführt werden können
- Verwenden Sie mapGetters, dies wurde indirekt gesagt, aber Einheitlichkeit ist besser, als sie nicht zu haben
Dieser Artikel richtet sich an Anfänger und verwirrte Entwickler. Wenn Sie die Dokumentation für Vue und Vuex noch nicht geöffnet haben und sich als Erstes die Informationen zum Problem auf dem Hub angesehen haben, folgen Sie den obigen Links und lesen Sie sie. Verwenden Sie anschließend Tipps aus verschiedenen Quellen.