Introduction

¡Pinia o Pineapple is much more than a delicious tropical fruit; it is also the name of a powerful tool for web development!

For some time now, we have had Vue version 3 among us, and this new version comes with some changes. Previously, the recommended installation included Vetur, Vue CLI y Vuex, while now they are Fly, Vite y Pinia the recommended ones.

What is it?

This is a library state management system that boosts the performance and efficiency of your applications. Imagine having global state for your Vue components without sacrificing performance.

In this article, we will explore what it is and how it differs from Vuex.

How is Pinia different from Vuex?

Mutations

We have essentially left behind the era where modifying state involved the execution of actions that, in turn, called for mutations. This transition marks a significant change in our approach to state management and the implementation of changes in our system.

An example of what a store of Vuex, would be as follows:

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      items: []
    }      
  }, 
  actions: {
    addItem({ commit }, item) {
      commit('addNewItem', item)
    }
  }, 
  mutations: {
    addNewItem(state, item) {
      state.items.push(item)
    }
  }
})

With Pinia is a bit tidier and, in my opinion, much more legible:

import { defineStore } from 'pinia'

Export const useCartStore = defineStore( 'cart', {
  state () => ({
    return {
      items: []
    }
  }),
  actions: {
    addItem(item) {
      this.items.push(item)
    }
  }
})

Different stores

Whereas at Vuex we are limited to a single store, although we can create modules to modularize the logic, in Pinia we can generate an unlimited amount of stores according to our needs. This allows us to separate responsibilities more effectively and maintain a clean and organized design in projects of any size. Whether there is one, twenty or even more, the stores in Pinia can be imported and used in different parts of the project, providing an additional level of modularity and scalability.

MapAction

In order to call a method of the store in Vuex you needed to use mapActions, which contained a array of the methods you were going to use from the store, This is a bit cumbersome.

<template'
  // ... 
  <button @click="addItem('oranges')">Oranges</button>
</templete>

<script
import { mapActions } from 'vuex'
 
  // ... 
methods: {
  ...mapActions([
    'addItem'
  ])
}
'/script'

In contrast, in Pinia this task is as simple as using the store and execute the required action. With just a few steps, you can access store status and functionality, simplifying interaction with data management in your Vue components.

<template>
  // ...
  <button @click="cart.addItem 'oranges')"'Oranges'/button'
</template>

<script>
import { useCartStore } from './stores/cart'

// ...
const cart = useCartStore()
</script

Typescript support

Unlike Vuex, Pinia offers solid support for TypeScript, This enhances our ability to write more robust code and promotes the adoption of more robust and secure development practices. Seamless integration with TypeScript at Pinia streamlines error detection and provides self-generated documentation that improves clarity in collaborative development.

DevTools Support

Another interesting thing is that Pinia is already supported by the devtools Vue so it's much easier to see what we have on the store at any time while debugging our code.

Something similar to this is what we find with the VueDevTools when we want to see the store from Pinia.

Conclusion

Should we opt for Pinia? The short answer: yes, definitely. However, the extended answer is more nuanced and depends on the context. If you are comfortable with Vuex and have successfully incorporated it into your projects, it may be preferable to keep it. However, if you are starting a new project, my recommendation is. Pinia. It is more intuitive and, in my opinion, has many advantages over Vuex. In addition, if you are already familiar with Vuex, the transition to Pinia will be surprisingly smooth and enriching.

In short, it is a state management library that has quickly gained popularity in the Vue developer community. Its focus on performance and efficiency has resonated strongly, especially in large projects where state management is critical.