Getting started with Pinia for VueJS and NuxtJS🍍

Say goodbye to cluttered and confusing state management in your VueJS and NuxtJS projects with Pinia! This tropical paradise of a plugin is not just your average state management tool, it's a full-featured framework that'll have you sipping on pina coladas while you build dynamic and responsive user interfaces.

With its powerful store manager, customizable layout system, and a plethora of tasty directives and components, Pinia is the ultimate way to add some island vibes to your development process. So put on your Hawaiian shirt and let's get ready to party with Pinia!

🍍 What exactly is Pinia?

Pinia is a versatile and lightweight plugin for VueJS and NuxtJS that makes building dynamic and responsive user interfaces a breeze. It's packed with all the features you need to create amazing projects and it is designed to make state management easy and organized.

With Pinia, you can manage your application's state in a centralized way, customize the layout of your application, and use a variety of directives and components to make your development process more efficient.

🤔 How does it differ from Vuex?

You may now ask yourserlf: "But how does it differ from Vuex?". Good question indeed!

Pinia and Vuex are both state management libraries for VueJS, but they have some key differences.

Vuex

Vuex is a centralized state management library that follows the Flux architecture pattern. It uses a strict unidirectional data flow and provides a centralized store for the whole application. This makes it simple to understand, but it can become complex when the application grows.

Pinia

On the other hand, Pinia is a state management library that is built on top of Vuex. It aims to provide a more flexible approach to state management by allowing developers to split the store into smaller, more manageable modules. This can make it easier to understand and maintain, especially for larger applications. Additionally, Pinia also provides a layout system and a set of directives and components that can help you to build their application in an easy and efficient way. It's a sort of "Jack of all trades", like the cat above who is not only a cat, but also a pineapple 🙃

✅ Why can it be a better choice?

Now that you have an idea of the differences, you may ask why use one over the other, right? Well, I will share some reasons why Pinia might make a good choice:

• Pinia allows you to split the store into smaller, more manageable modules, which can make it easier to understand and maintain, especially for larger applications.
• Pinia provides a simpler and more intuitive API that makes it easy to get started with state management in your VueJS and NuxtJS projects.
• Pinia also provides a layout system and a set of directives and components that can help developers to build their application in an easy and efficient way.
• Pinia allows to organize the state in a more natural way, making it easier to understand and to debug the application.
• Pinia provides a dynamic layout system that can be used to switch layouts on the fly and also to customize the layout of the application

At the end of the day though, the choice over one or the other comes down to your specific needs for the project you are working on in particular. One could argue for hours what the best choice would be and like a colleague once told me: "it depends" 😉

💾 How to install Pinia

Too much talking, right? 😅 Let's now dive into what really matters - installing and using it. 😎

NPM

npm install @pina/core

Yarn

yarn add @pina/core

Now that you have installed it, let's import it to your project.

VueJS

import Pinia from '@pina/core'

Vue.use(Pinia)

NuxtJS

import Pinia from '@pina/core'
export default {
  // ...
  modules: [
    '@pina/core/nuxt'
  ],
  // ...
  pinia: {
    modules: [
        // modules goes here
    ]
  }
}

Installing and importing is done 👏 Let's now use it in an example project!

🚧 Use case

1. Setup a store to manage the state in your app:

// store.js

import { createStore } from '@pina/core'

export const store = createStore({
  state: {
    message: 'Hello, World!'
  },
  mutations: {
    updateMessage (state, payload) {
      state.message = payload
    }
  }
})

1. Create a component and paste the following template and script tags:

// PiniaExample.vue

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage('Hello, Pinia!')">Update Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from '@pina/core'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
}
</script>

I will now break the project down to simple steps so you have an idea of what's happening under the hood:

1. In the store, state has a message property which is set to "Hello, World!". The mutations are methods that allow us to modify the state. In this example, there is a mutation called updateMessage that takes a payload and updates the message property in the state.

2. The template in PiniaExample.vue displays the message from the store and has a button that when clicked, triggers the updateMessage mutation. The template uses the mapState helper from Pinia to access the message property in the store.

3. When the button is clicked, the updateMessage method is called and it triggers the mutation in the store, changing the message property.

Following the idea of the project above, you should be able to see the similarities between Vuex, as well as the way you can apply it to your project for state management. Good job!👏

Thank you for reading!

I hope that this article helped you gain an understanding of how Pinia works in it's core, and that you can take this tool to your project in the way you need and that will help you scale more easily.

Make sure to follow me on my social media to stay up to date on projects I work on or contribute to:

• GitHub: https://github.com/bcostaaa01
• Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!👋

Until then,
Happy Coding!👩‍💻

Comments

[Tyler V. (he/him)]

Great intro post! I'm working on the move to Vue 3 and didn't realize that Pinia wasn't that different from Vuex (in execution) 😅

This might be a new article, but how does the PiniaExample.vue file look with <script setup>?

[Bruno]

Thank you, Tyler!🙂

Ah, yeah, Vuex is kinda “Vuexish”. To be honest, I like working with both 😅

That’s a good question and idea for a next article indeed! I will write on that soon!🙂

[gkTim]

Great article. Thumbs up for the gif selection :D

[Bruno]

Aw hehe thank you, @gktim! :D

[Gus Pear 🍐]

That is indeed a sweet intro to pinia Bruno!

Keep consistent 🚀🚀

[Bruno]

Thank you so much Gus!😃

[Tempest Rock]

Thanks a lot for the nice comparison. Really helpful!
What may be cool for many readers is to see a 'how to install' section that uses the Vue3 composition API and TypeScript.

[Bruno]

Hey @tempestrock, thank you for your comment and positive feedback, I am happy it helped!🙂

Thank you for the good point! I will write a separate article on that and add here later to this article 🙂