Quelle: dotnetpro
State-Management mit Vue.js 3 14.11.2022, 00:00 Uhr

Zustände kriegen

In Vue.js gibt es zur Verwaltung globaler Anwendungszustände neben den in das Kernprodukt integrierten Funktionen auch die Erweiterungspakete Vuex und Pinia.
Die dotnetpro hatte bereits in Ausgabe 7/2022 von der Vielfalt der Architekturstile in Vue.js berichtet [1]. Diese Qual der Wahl setzt sich fort bei der Verwaltung komponentenübergreifender Anwendungszustände (State-Management).
Praxis-Fallbeispiel in diesem Beitrag ist eine reduzierte Ver­sion einer Mitarbeiterstamm­datenverwaltung (Bild 1). Auf der linken Seite sieht man eine Mitarbeiterliste, die sich per Auswahlfeld nach Teams filtern lässt. Zu dem jeweils auf der linken Seite an­gewählten Mitarbeiter werden rechts die Details in mehreren Eingabefeldern gezeigt. Jegliche Änderung in den Eingabefeldern Name (Zeile 1) und Position (Zeile 2) wird sofort bei jedem einzelnen Tastaturanschlag in der Liste links sichtbar. Bild 2 zeigt den Aufbau der Lösung, bestehend aus drei Vue.js-Komponenten: EmployeeDashboard.vue, EmployeeList.vue und EmployeeEdit.vue.

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar