© PureSolution/Shutterstock.com
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.

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 den Benutzer sichtbar wird. Modifikationen erfolgen stets über die sogenannten Actions. Das sind einfache JavaScript-Objekte, die die Änderungen am Store beschreiben. Ein solches Action-Objekt wird auf dem Store dispatcht und anschließend vom Reducer verarbeitet. Dieser Reducer sorgt dafür, dass aus dem bisherigen State und den Informationen aus der Action der neue State Ihrer Applikation generiert wird.

springer_vuex_1.tif_fmt1.jpgAbb. 1: Die Flux-Architektur [1]

Vuex ist eine konkrete Implementierung des Flux-Patterns mit einigen Abwandlungen und Anpassungen speziell an die Anforderungen von Vue.js. Das führt dazu, dass Sie die Begriffe aus Flux nicht direkt in Vuex wiederfinden, die Konzepte allerdings deutlich sichtbar sind. Der Einsatz von Vuex bedeutet nicht, dass Sie komplett auf lokalen Komponenten-State verzichten müssen. Lokaler und applikationsweiter State können parallel zueinander existieren. Im lokalen State Ihrer Komponenten halten Sie Daten vor, die nur die Komponente selbst oder ihre direkten Kindkomponenten betreffen. In den meisten Fällen handelt es sich hierbei um anzeigerelevante Daten wie beispielsweise Daten von Formularelementen, Filter- oder Sortiereingaben. Alle weiteren Daten, die an mehreren Stellen angezeigt oder modifiziert werden können oder die Sie über eine tiefere Hierarchie von Komponenten weiterreichen müssten, speichern Sie in Vuex.

You might not need … Vuex

Dan Abramov, die treibende Kraft hinter Redux, veröffentlichte einen Blogartikel mit dem Titel „You might not need Redux“ [1]. Dieser Artikel entstand, weil sich viele Entwickler beschweren, dass State-Management-Bibliotheken wie Redux oder Vuex zusätzlichen Aufwand bei der Entwicklung und Pflege einer Applikation bedeuten und die Vorteile teilweise nicht direkt sichtbar werden. Grundsätzlich stimmt es natürlich, dass der Einsatz von Vuex zunächst bedeutet, dass Sie mehr Code schreiben müssen, um das gleiche wie mit lokalem Komponenten-State zu erreichen. Deshalb und wegen der zusätzlichen Komplexität, die Sie sich mit Vuex an Bord holen, sollten Sie sich zu Beginn der Entwicklung die Frage stellen, ob Sie tatsächlich eine State-Management-Bibliothek benötigen. Für viele kleinere Applikationen sind die Bordmittel von Vue.js völlig ausreichend, also machen Sie nicht den Fehler, Vuex in Ihre Standardlösung aufzunehmen. Treffen Sie die Entscheidung bewusst und nur, wenn Ihre Problemstellung den Einsatz der Bibliothek rechtfertigt.

Die Beispielapplikation

Dieser Artikel nutzt die gleiche To-do-Applikation wie der Vorgängerartikel mit der Einführung in Vue.js [2]. Mit dieser Applikation können Sie Aufgaben anzeigen, erstellen, modifizieren und löschen. Diese Applikation wurde mit dem Kommando vue create todo-list des Vue CLI erstellt. Die Grundlage der Anzeige bilden die zwei Komponenten TodoList und TodoListItem. Bei beiden Komponenten handelt es sich um Single File Components, die jeweils in einer separaten Datei gespeichert werden. In Listing 1 sehen Sie den verkürzten Quellcode beider Komponenten.

Listing 1: Komponenten der Listenanzeige

// TodoList.vue <template> <ul> <TodoListItem v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.id"></TodoListItem> </ul> </template> <script> import TodoListItem from './TodoListItem.vue'; export default { name: 'TodoList', components: { TodoListItem }, data() { return { todos: [] }; }, }; </script> <style scoped></style> // TodoListItem.vue <template> <li v-bind:class="todo.done ? 'done' : 'open'"> {{todo.title}} <span v-if="todo.done" v-on:click="toggleDone(todo.id)">✔</span> <span v-else @click="toggleState(todo.id)">✘</span> </li>i </template> <script> export default { props: ['todo'], }; </script> <style scoped></style>

Mit dem Kommando npm run serve starten Sie die Applikation lokal, sodass Sie sie über den URL http://localhost:8080 erreichen können.

Vuex – Installation und erste Schritte

Die offizielle Projektseite von Vuex mit zahlreichen Ressourcen finden Sie unter [3]. Im Gegensatz zu Redux, das völlig unabhängig von React entwickelt wird, geht die Entwicklung von Vue und Vuex Hand in Hand. Ein deutliches Indiz hierfür ist auch, dass Vuex innerhalb der GitHub-Organisation von Vue entwickelt wird. Vuex verfolgt einen ähnlich leichtgewichtigen Ansatz wie Vue selbst, wenn es um die Einbindung der Bibliothek geht. Grundsätzlich können Sie sich die gebaute Bibliothek herunterladen, sie in Ihre Applikation einbinden und direkt loslegen. Die sauberere und besser wartbare Lösung ist jedoch der Einsatz eines Paketmanagers wie npm oder Yarn und des JavaScript-Modulsystems. Mit dem Befehl npm install vuex installieren Sie Vuex über npm in Ihrer Applikation. Die Abhängigkeit wird in die package.json-Datei eingetragen und Sie können in regelm...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang