What is Pinia?

3 min readAug 10, 2023

Pinia is the state management solution created by Vue core team member Eduardo San Martin Morote. Who also creates a Vue router. While Vuex was the officially recommended state management solution for quite a while, Pinia has now taken its spot and is the recommended solution in the newest vue.js Doc.

What is state management?

Applications often need access to the same data across different components without some form of global state management. We’re sending that data up via events to parent components and passing that data down as props to child components. And while this approach definitely has its place, depending on the size of the application and all the places where that data is needed, this can quickly become unmaintainable. That’s where a state management solution like Pinia comes in.

Instead of each component keeping track of its own state and passing that state around,

Pinia acts as a global store. Storing state in a single place and passing it out to components as they request it, as well as providing mechanisms for components to mutate it, It doesn’t mean Pinia is a replacement for props and events. but rather compliments them. Some data is best preserved at the component level, but for all that isn’t, Pinia is there.

When do I add Pinia to my project?

When do I introduce state management to a project? Is it reserved only for large projects, or can it be helpful in smaller ones too?

The answer to this question is somewhat subjective, but my recommendation is this: If the scope of your project is smaller and not ever expected to grow beyond 5 to 10 components, let’s say, then Pinia probably isn’t necessary. Furthermore, if the application simply has no state that is shared amongst multiple components, then you could go without Pinia.

Such a case will most certainly only ever be true with the smallest of apps, such as a small demo, educational projects, and the like.