Pinia - The friendlier alternative to vuex

What exactly is Pinia?

Eduardo San Martin, a member of the Vue Core team and the creator of the essential Vue Router, has created Pinia, a new state management library for the Vue ecosystem. As a state manager, it performs the same function as Vuex and many other libraries serving the same purpose, though in this case, Pinia is official and has the support of the Vue team. 

You may be wondering what is going on with Vuex at this point. It will continue to be supported and is still one of the official recommendations, so don't be concerned. However, given that it aims to be a replacement for Vuex, it is not a bad place to start learning Pinia for projects using Vue version 3. Especially considering the benefits it provides, as we will see below.   

How does Pinia function in comparison to Vuex?

Let's take a look at some of Pinna's most exciting features that make it superior to Vuex.

1. Pinia's API is simpler than Vuex's

Pina's API is simpler and more user-friendly than Vuex's. Even for a junior developer, getting started with state management is much easier now that a lot of boilerplate code that was required to be written between every state change in Vuex has been removed in Pinia.

A pinia example

Let’s take a look at a Pinia example. To set up and install Pinia in your Vue app, simply run the following command in your terminal:

Update your main.js to use Pinia:

Create a stores folder under src and create a file called counter.js and paste in the following code:

📁src/stores/counter.js

A few things to note from the code above:

• Mutations have been removed entirely from the state management cycle. Pinia state can directly be updated in our Actions, thereby reducing verbosity
• Pinia Actions no longer need extra arguments such as “context”. 
• Pinia Getters that rely on other getters to work (i.e double plus one relying on double-count) can get access to the whole store instance using this. However, when using Pinia with TypeScript, it is necessary to define the return type due to a known TS limitation, which doesn’t affect getters defined with an arrow function, nor do getters not use this.

These changes make our Pinia code much simpler to read and understand when compared to its Vuex counterpart.

2. Pinia was designed to be modular

Vuex provides you with a single store that can house multiple modules. In Pinia, you can create multiple stores that can be imported directly into components where they are needed. This allows bundlers to better split code and provides better TypeScript inferences.

Having multiple stores rather than just one also simplifies development because only the methods of the Pinia Store (or module) must be used each time, rather than the entire store in Vuex.

Using the Pinia example from earlier, a single file component would look like this:

3. Pinia includes Devtools

If you're familiar with Vuex, you've probably made extensive use of the Vuex tab in Vue DevTools. You may be aware that the separation of Vuex Actions and Mutations meant that the DevTools were hooked into the Mutations to track state changes in Vuex. This may make you wonder if Pinia has dev tools. 

Thankfully, the answer is yes. The Pinia dev tools are just as useful as the Vuex dev tools you're already used to, and they're available right away once you've installed Pinia in your Vue app.

4. Pinia includes Typescript support

For Vue developers, getting Vuex to support types has always been a difficult task. Pinia, a fully typed state management library, solves this problem. Type safety adds a lot of benefits to your application, such as preventing potential runtime errors, but even if you're not developing your application in TypeScript, you'll get other great benefits, such as auto-completion and auto-suggestion, thanks to Pinia’s redesigned developer experience.

To take advantage of these features, it is recommended that you define your state using arrow functions, which will give you the best type inference in Pinia. Because Pinia supports TypeScript, you can create an interface for your state, natively integrate type definitions within Pinia Actions, and get automatic documentation for what arguments the Actions take, complete with auto-suggestion and completion. 

Pinia with TypeScript store example:

Should I go with Pinia or Vuex?

Pinia, in my opinion, is a step forward in simplifying state management in Vue projects (or another JS framework). It is simpler to grasp because it avoids overlapping concepts such as mutation and action. At the same time, the usage syntax is very simple and clear: the definitions of stores and mutations in Redux 5 years ago are already out of date. However, for projects that already have Vuex implemented, or even projects in Vue 3 with Vuex, it is not a significant step forward, even though the migration in small applications is quite simple and pleasant. Although Pinia has been designated as the official state management solution for Vue apps in the future, this does not imply that Vuex is obsolete. If you already have a Vuex app in production, it will continue to function normally, and it is recommended that you continue to use Vuex because migrating from one library to another can be time-consuming. Pinia, on the other hand, is the way to go if your project is still in its early stages. Among the other features discussed in this article, you will benefit from Pinia's simpler syntax and simplicity. 

If your project is still in its early development phases, Pinia is the way to go. Our experts in Nodesol can assist you with state management or setting up Pinia for Vue. We keep up with the latest trends and technological advancements. Our work frequently goes beyond the systematic and planned manner of graphic design. We listen to our clients and want to know their stories so that our work is perfectly tailored to their requirements. We will be delighted to provide your company with comprehensive technological solutions.