Kurs · Schulung · Workshop
Pinia
Zwei Tage praxisnaher Einstieg in State-Management mit Pinia und Vue.js 3: Stores strukturieren, State, Getters und Actions nutzen, plus APIs, Persistenz, TypeScript und Testing.
Pinia – das schlanke, moderne State-Management für Vue: Mit einer intuitiven API, klarer Struktur und vollem TypeScript-Support macht Pinia globalen Zustand endlich unkompliziert. Schnell zu lernen, flexibel in der Anwendung und perfekt integriert in das Vue-Ökosystem – ideal für alle, die sauberen, wartbaren Code lieben.
Trainer
Stimmen unserer Teilnehmer:innen
Diese Kunden haben Kurse im gleichen Themen-Cluster bei uns gebucht.Mehr Kunden →
Inhalt
Wir bauen zusammen inkrementell Vue.js Applikationen mit Pinia welche folgende Themen veranschaulicht:
– Einführung in State-Management:
- Warum State-Management?
- Vergleich: Local State vs. Global State
- Warum Pinia als Nachfolger von Vuex – Pinia Setup:
- Installation & Grundkonfiguration
- Registrieren des Stores im Vue-Projekt
- Best Practices für Ordnerstrukturen – State:
- State definieren
- Reaktive Werte & Deep Reactivity
- Data-Flow Überblick
- Übung: Mini-App mit globalem Store (z. B. Counter, Todo-Tags, Dashboard-Status) – Getters:
- Grundlagen & Syntax
- Computed-Properties im Store
- Performance-Aspekte und Caching
- Übung: Filter-Logiken (z. B. gefilterte Todos, Userrollen, Dashboard-Auswertungen)
- Actions:
- Synchrone & asynchrone Actions
- Fehlerbehandlung
- API-Requests einbinden
- Übung: API-basierte Actions (User laden, Products abrufen usw.)
- Modulare Stores & Scaling:
- Wann mehrere Stores?
- Cross-Store-Kommunikation
- Store Factories
- Übung: App in mehrere Stores aufteilen (z. B. Auth, UI, Domain-Store)
- Persistenz & Plugins:
- Persistenzstrategien (localStorage, IndexedDB)
- Einführung in Pinia Plugins
- Beispiel: Persistenz-Plugin implementieren
- Übung: Eigene Persistenz für User-Settings entwickeln
- Typisierung mit TypeScript:
- Type-Safety im Store
- Hinweise zu Interfaces & Return Types
- Fehlerquellen und Tipps
- Testing von Pinia:
- Unit-Tests für Stores
- Mocking externer Daten
- Behavior-driven Tests
- Übung: Ein Store wird in Vitest getestet
- Architektur & Best Practices:
- Saubere Store-Strukturen
- Kapselung & klare Verantwortlichkeiten
- Performance-Tipps für grosse Projekte
- Wann kein Store nötig ist
Der Kurs basiert auf verfeinertem und erprobtem Kursmaterial mit Erläuterung, Aufgaben, Kurs-Projekt / Code, Lösungs-Code und weiterführenden Informationen.
Der effektive Kursinhalt kann, abhängig von Trainer, Durchführung, Dauer und Konstellation der Teilnehmer:innen, von obigen Angaben abweichen.
In-House Kurs anfragen
Öffentlichen Termin anfragen
Kein passender öffentlicher Termin dabei? Trag dich unverbindlich ein – sobald genug Interesse besteht, planen wir einen neuen öffentlichen Termin und informieren dich zuerst.
Mehr über Pinia
Pinia ist die offizielle State-Management-Bibliothek für Vue.js und der empfohlene Nachfolger von Vuex. Sie bietet eine intuitive, typsichere API mit vollem TypeScript-Support, Devtools-Integration und einem leichtgewichtigen Design von nur ca. 1,5 KB. Pinia unterstützt sowohl die Options API als auch die Composition API und lässt sich nahtlos in das gesamte Vue-Ökosystem integrieren.Weitere Ressourcen:
History
Pinia wurde 2019 von Eduardo San Martin Morote, einem Mitglied des Vue.js Core Teams, als experimentelles Projekt gestartet, um eine einfachere Alternative zu Vuex zu schaffen. Der Name „Pinia" leitet sich vom spanischen Wort für Ananas ab – eine Anspielung auf das Vue-Logo. Nach intensiver Weiterentwicklung und Aufnahme in die offizielle Vue-Organisation wurde Pinia 2021 als stabiles Release veröffentlicht.
Mit Vue 3 und dem Aufkommen der Composition API wurde Pinia zur bevorzugten Wahl für State Management im Vue-Ökosystem. Das Vue.js-Team empfiehlt Pinia offiziell als Nachfolger von Vuex, da es eine klarere API, bessere TypeScript-Unterstützung und eine modulare Store-Struktur ohne die Komplexität von Mutations bietet.