Sebastian Springer MaibornWolff

„Ein weiterer Vorteil von Vuex ist die nahezu nahtlose Integration in Vue. Das reaktive System von Vue sorgt dafür, dass Änderungen am State der Applikation in der Ansicht aktualisiert werden, ohne dass Sie selbst dafür sorgen müssen.“

Vue.js ist eine Bibliothek zur Erzeugung grafischer Oberflächen im Web. Die Leichtgewichtigkeit der Bibliothek, gepaart mit einer relativ geringen Einstiegshürde, trägt viel zur Verbreitung von Vue.js bei. Und trotzdem ist Vue.js ein mächtiges Werkzeug, mit dem sich selbst umfangreichste Applikationen umsetzen lassen. Doch ab einer bestimmten Größe und Komplexität einer Applikation stoßen Sie mit Vue.js allein an die Grenzen des Machbaren. Der Grund hierfür liegt darin, dass sich bei großen Applikationen der State kaum verwalten lässt. Aus diesem Grund wurde mit Vuex eine Bibliothek zum State Management implementiert. In diesem Artikel lernen Sie die Grundlagen dieser Bibliothek kennen und sehen, wie Sie Vuex in eine Vue-Applikation integrieren können.

Als State werden die Daten Ihrer Applikation bezeichnet. Das können dynamische Daten sein, die vom Server geladen, oder auch Zustände der Oberfläche, die nur temporär vorgehalten werden. Jede Vue-Komponente kann ihren eigenen State verwalten. Dieser wird über die data-Eigenschaft der Komponente verwaltet. In der Regel besteht Ihre Applikation nicht nur aus einer Komponente, sondern aus einem ganzen Baum von Komponenten. Und genau hier beginnen die Schwierigkeiten. Soll eine Information in mehreren Komponenten angezeigt werden, muss sie in einer gemeinsamen Elternkomponente platziert werden. Damit steigt der Grad der Abhängigkeit zwischen den Komponenten, was die einfache Wiederverwendbarkeit reduziert. Bei tiefen Komponentenbäumen führt die Zentralisierung des States schnell zu einem einfachen Durchreichen der Informationen über längere Wege. Komponenten leiten Informationen über Props an ihre Kindkomponenten weiter, ohne dass sie selbst die Information benötigen. Mit einer zunehmenden Menge an Informationen erhöht sich auch der Wartungs- und Pflegeaufwand. Ein weiteres Problem im Zusammenhang mit dem State Ihrer Applikation entsteht, wenn Sie die Informationen an mehreren Stellen manipulieren möchten. Auch hier müssen Sie ohne weitere Hilfsmittel selbst dafür sorgen, dass der State in Ihrer Applikation zu jeder Zeit konsistent ist, was häufig dazu führt, dass Sie Events ebenso wie die Props über die Komponentenhierarchie weiterreichen.

Eine Lösung für diese Probleme bietet ein Architekturmuster, das ursprünglich von Facebook entwickelt wurde und den Namen Flux trägt. Die Flux-Architektur wird mittlerweile nicht mehr nur in React-Applikationen in Form von Redux oder anderen Bibliotheken eingesetzt, sondern hat auch Einzug in Angular in Form von NgRx Store und Vue.js mit Vuex gehalten.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Entwickler Magazin 1.19 - "Knative: Kubernetes goes Serverless"

Alle Infos zum Heft
579869944Vuex – State Management in Vue-Applikationen
X
- Gib Deinen Standort ein -
- or -