© PureSolution/Shutterstock.com
Entwickler Magazin
Vuex - State Management in Vue-Applikationen

(K)ein Satz mit X in Vue

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.

Sebastian Springer


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.

In Abbildung 1 sehen Sie die Elemente einer Flux-Architektur. Den Kern bildet der Store, hier werden die Informationen festgehalten. Je nach Implementierung kann es einen oder mehrere Stores geben. Im Fall von Vuex beschränken Sie sich auf nur einen Store, der allerdings mithilfe von Modulen untergliedert werden kann. Diesen zentralen Store können Sie überall in Ihrer Applikation direkt verwenden. Der Zugriff auf den Store erfolgt allerdings nur lesend. Der Grund hierfür ist, dass die Architektur reaktiv aufgebaut ist und eine Änderung am Store dazu führt, dass sämtliche angeschlossenen Komponenten aktualisiert werden, sobald sich eine Information ändert, sodass diese für d...

Entwickler Magazin
Vuex - State Management in Vue-Applikationen

(K)ein Satz mit X in Vue

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.

Sebastian Springer


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.

In Abbildung 1 sehen Sie die Elemente einer Flux-Architektur. Den Kern bildet der Store, hier werden die Informationen festgehalten. Je nach Implementierung kann es einen oder mehrere Stores geben. Im Fall von Vuex beschränken Sie sich auf nur einen Store, der allerdings mithilfe von Modulen untergliedert werden kann. Diesen zentralen Store können Sie überall in Ihrer Applikation direkt verwenden. Der Zugriff auf den Store erfolgt allerdings nur lesend. Der Grund hierfür ist, dass die Architektur reaktiv aufgebaut ist und eine Änderung am Store dazu führt, dass sämtliche angeschlossenen Komponenten aktualisiert werden, sobald sich eine Information ändert, sodass diese für d...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang