PINIA the new Vue State Manager

Pinia is a new state management tool for VueJS. It is also recommended by the Vue team officially. Eduardo San Martin Morote implemented it, who is also a Vue core developer. The features of the Vue router tie to him. 

Pinia uses the new VUE3 reactivity system, and this State Management System was born to test the proposals for the following iterations of Vuex. That means the new Vuex 5 will share many similarities with PINIA. By the way, Vuex is another State Management System. You can read more about Vuex here.

State Management Systems in general

State Management Tools help developers to share components data in a much simpler way. We can remove many Vue-related data emitters and props to pass up and down data in the components tree. So we can reduce the complexity of the component’s communication. Due to this, we will have a much cleaner and more readable code.

State Management Systems introduces a single global state into the application that is sharable between the components. We can mutate this state which means we can make CRUD operations on them. 

Why PINIA?

One of the most crucial factors why PINIA is worth trying is the speed. It is fast, and in some cases, it performs better than the Vuex state manager because its size is small. It is around 1KB. It is extendible and supports transactions and local storage synchronization. It is modular, so you have the option for code splitting and creating multiple stores. You can group state changes. It has a Devtool integration due to this you will get an enhanced development experience. It is intuitive and it has a Type-Safe autocompletion feature.

Installation of PINIA with Vue

The installation process differs when you try to install it at the beginning of the project or into an existing project that does not have the PINIA feature.

1, You can install it at the beginning of the project when you scaffold the project.

• npm init vue@3
• After the command, you can select PINIA from the options

2, You can install it as a package with the 

• yarn add pinia
• # or with npm
• npm install pinia

Pinia tries to stay as close to Vuex’s philosophy as possible. It was designed to test out a proposal for the next iteration of Vuex and it was a success as we currently have an open RFC for Vuex 5 with an API very similar to the one used by Pinia. My personal intention with this project is to redesign the experience of using a global Store while keeping the approachable philosophy of Vue. I keep the API of Pinia as close as Vuex as it keeps moving forward to make it easy for people to migrate to Vuex or to even fusion both projects (under Vuex) in the future.

Eduardo San Martin Morote the authors of PINIA

My mindmap about the topic

Conclusion & Closing

PINIA is a new State Management tool for VueJS. It is recommended by the Vue team officially. It is for small and medium-sized projects, while Vuex is for the big ones. If further details are needed you can check a comparison here.