Pinia

Pinia is a state management library for Vue.js, focused on Vue 3 and the modern composition API. It serves as a lightweight, type-safe alternative to older patterns and is considered the recommended store for Vue 3 projects. Pinia emphasizes modular stores that are defined and consumed independently, rather than enforcing a single monolithic store.

At the core, a store is created with a function like defineStore, which takes an id and a store definition. Each store exposes state, getters and actions. State is a function that returns reactive data, getters derive computed values from state, and actions perform mutations or asynchronous operations. Stores are accessed through a dedicated hook, typically named useXStore, and are used directly in components to read state or call actions. Pinia integrates with the Vue reactivity system, so changes are reflected automatically in the UI.

Setup and usage are straightforward: install the package, create a Pinia instance with createPinia, and install it into the Vue app with app.use(pinia). Components import the store definitions and instantiate them via the hook, for example const counterStore = useCounterStore(); and then read or mutate state through the store object. Pinia supports TypeScript well, offering typed stores and automatic type inference, improving developer experience in strongly typed projects.

Key features include modular stores, hot module replacement, devtools integration, and a plugin ecosystem that adds capabilities such as persistence. Pinia is MIT-licensed, actively maintained, and widely adopted in the Vue ecosystem as the standard approach to client-side state management.