Vue State Management
State management is at the heart of every Vue application, but exactly how you manage that state can sometimes be...confusing. So let's explore your options! We'll start with the basics, like props and events, before moving on to provide/inject, custom composables, and Pinia. Along the way, we'll tackle practical, real-world scenarios. By the end, you'll know exactly which approach to use and when, so your apps stay clean, organized, and fun to work on.
Progress
Series Info
- Episodes
- 13
- Run Time
- 2h 18m
- Difficulty
- Advanced
- Last Updated
- Aug 14, 2025
- Version
- Pinia 3
Series Episodes
- Basic State Management (2)
Basic State Management Using Props
The simplest way to manage state in Vue is by passing data through props. In this episode, we’ll walk through how props and events work together to keep your components in sync.Mitigating Prop Drilling Using Provide And Inject
When props get passed through too many layers, it can become a headache. Here, we’ll use provide and inject to share data across the component tree more directly.
- Custom Composables (1)
- Pinia State Management (8)
Introducing Pinia State Management
Pinia is the recommended state management library for Vue, and for good reason. Let’s get familiar with it and see how it can simplify our state handling.Async Actions Using Pinia
Sometimes you need to fetch data or perform other asynchronous tasks. We’ll create async actions in Pinia and wire them up to our API calls.Authentication
Authentication is a crucial part of many apps. In this episode, we’ll learn how to store and manage authentication data in Pinia.Placing & Retrieving Orders
Once users are logged in, they’ll want to place and view orders. We’ll handle both of those tasks while keeping everything secure with authenticated API calls.Pinia $onAction
Pinia’s $onAction hook lets you respond to store actions in a really flexible way. We’ll use it to trigger a nice little toast notification for our users.Pinia Plugins
Plugins can add a lot of extra functionality to your stores. In this lesson, we’ll create our own Pinia plugin and also integrate the pinia-plugin-persistedstate package.Testing Pinia Stores
It’s testing time! We’ll write tests for our stores in isolation and also check components that depend on them.Pinia And SSR (Using Nuxt)
Server-side rendering changes a few things when working with state. We’ll explore how to make Pinia work smoothly with Nuxt’s SSR setup.
- Wrapping Up (2)
Async State Using Tanstack Query
Tanstack Query can handle server-side state without all the repetitive boilerplate. We’ll see how it works and even set up a retry mechanism with backoff.Where To Go Next?
We’ve covered a lot of ground in this course. In this final episode, we’ll reflect on what you’ve learned and suggest some next steps for your Vue journey.
