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
- 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
}
}
})
- Create a component and paste the following
template
andscript
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:
In the
store
,state
has amessage
property which is set to"Hello, World!"
. Themutations
are methods that allow us to modify thestate
. In this example, there is amutation
calledupdateMessage
that takes apayload
and updates themessage
property in thestate
.The
template
inPiniaExample.vue
displays themessage
from thestore
and has a button that when clicked, triggers theupdateMessage
mutation
. Thetemplate
uses themapState
helper from Pinia to access themessage
property in thestore
.When the button is clicked, the
updateMessage
method is called and it triggers themutation
in thestore
, changing themessage
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!๐ฉโ๐ป
Top comments (8)
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>
?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!๐
Great article. Thumbs up for the gif selection :D
Aw hehe thank you, @gktim! :D
That is indeed a sweet intro to pinia Bruno!
Keep consistent ๐๐
Thank you so much Gus!๐
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.
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 ๐