Vue.js - Managing State mit Vuex

Objectives

Der Kurs Vue.js - Managing State mit Vuex soll zeigen, wie man Vuex einsetzt, um das State Management in einer Vue-Anwendung zu vereinfachen.

Der Kurs beginnt mit einem Überblick über Vue und seine Idioms und Syntax. Danach werden Getter, Mutations, Actions und Debugging behandelt. Schließlich endet der Kurs mit der Behandlung von Modulen, Plugins und Tests. Dieser Kurs ist hilfreich für Entwickler, die Vue verwenden und ihre Anwendungen pflegeleichter und übersichtlicher gestalten wollen.

Target audience

Web-Entwickler

Requirements

Solide Vue.js Kenntnisse

Agenda

Einführung

• Was ist Vuex?
• Kern-Konzepte
• Vorteile von Vuex gegenüber einfachem Vue.js State Management

Erste Schritte

• Installieren von Vuex
• Einfachen Vuex-Store erstellen
• Vuex-Store für die gesamte App verfügbar machen

Zugriff auf den State

• $storestate
• Mapping von State auf berechnete Eigenschaften in Komponenten

Getter

• Abrufen von berechneten Zuständen aus einem Store
• Schreiben von Gettern
• Getter verwenden
• Abbildung von Gettern

Mutationen

• Warum nicht einfach den Status direkt setzen?
• Schreiben von Mutationen
• Mutationen festschreiben
• Abbildung von Mutationen

Aktions

• Was sind Actions?
• Schreiben von Actions
• Durchführen von asynchronen Operations
• Verwendung von Actions zur Persistenz von Daten
• Versenden von Actions
• Abbildung von Actions

Fehlersuche

• Installieren von Vue-Entwicklungswerkzeugen
• Verfolgen von Statusänderungen im Tool
• "time travel" zum Debuggen verwenden

Module

• Aufteilung des Status in Module
• Namespacing von Modulen
• Registrierung von Modulen
• Zugriff auf den global/Root state von namespaced Modulen
• Tools, die bei der Erfassung von Modul-Zustand / Getter / Mutation / Actions in Komponenten helfen

Plugins

• Erstellen und Registrieren von Plugins
• Nützliche Plugins
• Verwendung von Plugins mit Modulen

Testing

• Gettern
• Mutations
• Actions