pinia
Pinia is the official state management library for Vue.js, providing a simple, type-safe, and modular approach to managing application state. Pinia replaced Vue…
Installation
npm install pinia
yarn add pinia
pnpm add pinia
Import
import { defineStore } from 'pinia';Quick Example
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
},
});
// In component: const store = useCounterStore();About pinia
Pinia is the official state management library for Vue.js, providing a simple, type-safe, and modular approach to managing application state. Pinia replaced Vuex as the recommended Vue state management solution starting with Vue 3, offering a drastically simpler API that eliminates mutations (a separate concept from actions in Vuex) in favor of direct state modification and async actions. Stores are defined using defineStore with either an options API (state, getters, actions) or a setup function (using ref, computed, and functions), mirroring Vue 3's Options API and Composition API patterns. Pinia provides full TypeScript support with type inference for state, getters, and actions without manual type annotations. Each store is created independently — no single root store configuration — making stores naturally code-splittable and lazy-loaded. Pinia supports server-side rendering, Vue DevTools integration for state inspection and time-travel debugging, plugins for extending store behavior (persistence, logging, undo/redo), and hot module replacement during development. The library's $patch method enables batched state updates for performance optimization. Pinia is the standard choice for Vue 3 applications requiring shared state.
Quick Facts
| Package | pinia |
| Category | State Management |
| Weekly Downloads | 2M+ |
| License | MIT |
| Install | npm install pinia |
Related Packages
Vuex is the legacy state management pattern and library for Vue.js applications, serving as a centra…
Vue.js is a progressive JavaScript framework for building user interfaces, created by Evan You in 20…
Nuxt is the intuitive full-stack framework for building Vue.js applications with server-side renderi…
Zustand is a small, fast, and scalable state management library for React that provides a simple hoo…
Browse npm Packages by Category
Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.