Features
- Composition API and Options API support
- Full TypeScript inference without extra config
- Vue DevTools integration
- Hot module replacement (HMR)
- Plugin system for extending store behavior
Pros
- Official Vue state management (replaces Vuex)
- Simpler API than Vuex — no mutations concept
- Excellent TypeScript support out of the box
Cons
- Vue-only — not usable with other frameworks
- Less powerful DevTools than Redux DevTools
- Smaller ecosystem of plugins than Redux
Overview
Pinia is the official state management library for Vue, designed as the successor to Vuex. It provides a simpler, more intuitive API that aligns with Vue 3’s Composition API while maintaining full support for the Options API. Pinia removes the concept of mutations (a common pain point in Vuex), letting you modify state directly.
Pinia stores are defined with defineStore and can use either a setup function (Composition API style) or an options object. Each store provides reactive state, computed getters, and actions — all with full TypeScript inference. Pinia integrates with Vue DevTools for time-travel debugging and state inspection.
When to Use
Pinia is the default choice for state management in Vue applications. Use it when you need shared state across components, complex state logic with getters and actions, or when building a Nuxt application (Pinia is auto-imported in Nuxt).
Getting Started
npm install piniaimport { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});