Course · Training · Workshop
Pinia
Two days of hands-on state management with Pinia and Vue.js 3: structure stores, use state, getters and actions, plus APIs, persistence, TypeScript and testing.
Pinia – the sleek, modern state management for Vue: With an intuitive API, clear structure, and full TypeScript support, Pinia finally makes global state management straightforward. Quick to learn, flexible to use, and perfectly integrated into the Vue ecosystem – ideal for anyone who loves clean, maintainable code.
Trainers
What participants say
These customers booked courses in the same topic cluster.More customers →
Content
Together we incrementally build Vue.js applications with Pinia which illustrates the following topics:
– Introduction to state management:
- Why state management?
- Comparison: Local state vs. global state
- Why Pinia as the successor to Vuex – Pinia setup:
- Installation & basic configuration
- Registering the store in the Vue project
- Best practices for folder structures – State:
- Defining state
- Reactive values & deep reactivity
- Data flow overview
- Exercise: Mini app with global store (e.g., counter, to-do tags, dashboard status) – Getters:
- Basics & Syntax
- Computed Properties in the Store
- Performance Aspects and Caching
- Exercise: Filter Logics (e.g., Filtered Todos, User Roles, Dashboard Evaluations)
- Actions:
- Synchronous & asynchronous actions
- Error handling
- Integrating API requests
- Exercise: API-based actions (loading users, retrieving products, etc.)
- Modular stores & scaling:
- When to use multiple stores?
- Cross-store communication
- Store factories
- Exercise: Split app into multiple stores (e.g., auth, UI, domain store)
- Persistence & plugins:
- Persistence strategies (localStorage, IndexedDB)
- Introduction to Pinia plugins
- Example: Implementing a persistence plugin
- Exercise: Developing your own persistence for user settings
- Typing with TypeScript:
- Type safety in the store
- Notes on interfaces & return types
- Sources of error and tips
- Testing Pinia:…
- Unit tests for stores
- Mocking external data
- Behavior-driven tests
- Exercise: Testing a store in Vitest
- Architecture & best practices:
- Clean store structures
- Encapsulation & clear responsibilities
- Performance tips for large projects
- When a store is not necessary
The course is based on refined and tested course material with explanation, assignments, course project / code, solution code and further information.
The actual course content may differ from the above depending on the trainer, delivery, duration and the composition of participants.
Request this course in-house
Request a public date
No suitable public date? Register without obligation — once there is enough interest we schedule a new public date and let you know first.
More about Pinia
Pinia is the official state management library for Vue.js and the recommended successor to Vuex. It offers an intuitive, type-safe API with full TypeScript support, Devtools integration, and a lightweight design of only about 1.5 KB. Pinia supports both the Options API and the Composition API and integrates seamlessly into the entire Vue ecosystem.Further resources:
History
Pinia was started in 2019 by Eduardo San Martin Morote, a member of the Vue.js core team, as an experimental project to create a simpler alternative to Vuex. The name "Pinia" derives from the Spanish word for pineapple – a nod to the Vue logo. After intensive development and adoption into the official Vue organization, Pinia was released as a stable version in 2021.
With Vue 3 and the rise of the Composition API, Pinia became the preferred choice for state management in the Vue ecosystem. The Vue.js team officially recommends Pinia as the successor to Vuex, as it offers a clearer API, better TypeScript support, and a modular store structure without the complexity of mutations.