Pinia vs Vuex
Vue's official state management evolved. If you're starting a new Vue project and reach for Vuex, we need to talk.
Pinia
Pinia is Vuex 5 in everything but name. It's the officially recommended state management for Vue, it's simpler, it has better TypeScript support, and there's zero reason to use Vuex in a new project.
Vuex Is Legacy
Let's not dance around it: Vuex is in maintenance mode. The Vue team recommends Pinia for all new projects. Evan You himself said Pinia is the de facto Vuex 5.
If you're starting a new Vue 3 project and someone suggests Vuex, they're living in 2021.
Why Pinia Is Better in Every Way
No mutations. That alone is worth the switch. Vuex's mutations/actions split was always confusing ā "do I commit or dispatch?" Pinia has actions. That's it. Change state directly or through actions.
TypeScript support is first-class. Vuex's TS support was bolted on and painful. Pinia was built with TypeScript from day one.
No more string-based module namespacing. Each store is its own module with direct imports. useCounterStore() instead of this.$store.state.counter.count.
Migration Path
If you're on Vuex 4, migration is straightforward:
⢠Replace mutations with direct state changes or actions
⢠Replace module namespacing with separate store files
⢠Replace mapState/mapActions with composable-style storeToRefs()
You can even run both side by side during migration.
Quick Comparison
| Factor | Pinia | Vuex |
|---|---|---|
| Vue 3 Support | First-class | Supported |
| TypeScript | Built-in, excellent | Bolted on, painful |
| API Simplicity | Actions only | Mutations + Actions |
| DevTools | Excellent | Good |
| Bundle Size | ~1KB | ~6KB |
| Official Status | Recommended | Maintenance mode |
| Composition API | Native | Awkward |
The Verdict
Use Pinia if: You're writing Vue. Period. New project or migration, Pinia is the answer.
Use Vuex if: You have a massive Vuex 4 codebase and the migration cost outweighs the benefits. That's the only reason.
Consider: For simple apps, you might not need either. Vue 3's `reactive()` and `provide/inject` handle basic state without a library.
Pinia is Vuex 5 in everything but name. It's the officially recommended state management for Vue, it's simpler, it has better TypeScript support, and there's zero reason to use Vuex in a new project.
Related Comparisons
Disagree? nice@nicepick.dev