What is Pinia (or Vuex), and when do you need a state store?
Quick Answer
Pinia (the current standard; Vuex was the predecessor) is a centralized store for state that many unrelated components share — the current user, a shopping cart, app-wide settings. You need it when state is used across distant parts of the tree and prop-drilling / provide-inject become unwieldy.
Pinia is Vue's official state management library now, replacing Vuex. It gives you a central store with state, getters and actions. I reach for it when a piece of state is genuinely shared across parts of the app that aren't near each other in the component tree — the logged-in user, a cart — and passing it down through props or provide/inject is getting painful. What I don't do is put every bit of state in the store; component-local state stays local, and cached server data is often better handled by a data-fetching library.
- A Pinia store has
state,getters(computed) andactions(methods, can be async). - Pinia dropped Vuex's mutations and verbose boilerplate; it's typed and works with the Composition API.
- Don't put everything in the store — component-local state stays local. Server data is often better in a query library (TanStack Query) than a store.