Vue JS State Management with Pinia! | Pinia & Composition API Tutorial

what is going on fellow web developers my name is tyler potts and in today's video we are going to learn about pina for few js now pina is essentially um it's like what fux is it's a state management tool you use it to manage your state inside a few js um this one has been specifically designed around the composition api style although i don't believe you need to use the composition api you can still use this with you too as it even says down there um but obviously this has been built with the composition api in mind with few free in mind um so it's super more intuitive than what few x's in my opinion and it's probably gonna replace few x for me inside of my project so i'm gonna be using pina instead of a few x from now on um so yeah let's go to get started and i'll just walk you through this little bit and then we'll actually build an example with pina so pina is a store library for fuji s uh perfect um and basically this is the syntax you can see here you define a store from pina you create you an ukraine export called use counter store whatever for a counter example you define a store you give it a name and then you pass in the different things so inside of pina you have state actions and getters you no longer need mutations because mutations was used for basically death tools and stuff like that to actually see the changes whereas now in pina it doesn't matter with this so this works a lot better you've got state actions and get does that work really well so as you can see um they're creating a state so you can see it just how you normally would a state uh returning some values for this one has accounts which starts at zero you can then create an action called increment incrementness values this dot count plus every time you hit increment discount will go up by one so it'll be one two three four and so on um and that's what you can see there you can also see how you use it so inside of your view application you would import use counter store um in your server method you would then just call um you would create the counter and say use counter store see now you've got counter dot count plus plus you can actually modify the state directly from inside of um the your actual component here rather than doing it via something like an action or a mutation um or you can call this patch which allows you to update your state and finally you can call your actions here as well so you can see counter dot increment and you can keep calling that now personally i prefer using this uh the action it's cleaner for me and it just works and as you can see here you can also you create a store so when you define your store like this up here you can actually use the similar syntax audi setup syntax works in view free composition api um and you can actually just do an arrow function instead of just passing through an object you'd pass through an arrow function and then you can do count count ref um zero uh increment plus plus and it's the same thing as you would in a setup value there so that's that's basically what this is here and we're going to create an actual example so we'll create a user management tool some sort of team management tool here um to basically use it so let's head over to our empty folder here there's an empty fugi uh vs code folder and we'll just go start by creating a default uh we're gonna create a feat um at latest we're gonna create in the current folder and then we're gonna use a template of ujs it's not all gonna ask us what the package name is and we're just gonna say team manager um and there you go i'm going to install two things i'm going to install pinya and i'm also going to install uuid just so we can generate random ids um you could don't have to use uiuid you could just use the index or whatnot i just want to show the uuid i think it looks cool so let's hit install and that's going to not only is that going to install our node modules on the left here it's also going to um install the two files we've just asked for so you go we've got our node modules and everything else so let's just clear this and look if i run npm i just to proof it there you go you can see it's instantly done so let's just say mpm run death just to get this up and running uh we can open this and i'm gonna break this out slap it to the side select the code and we're just going to put these side by side just like that close that we don't need that anymore we don't really need this side panel we'll delete so you can see it it's just a default view js thing so we're going to delete the components i'm going to delete the assets i'm going to app.main remove everything inside of this everything in here and we're just going to put hello world and we're just going to delete i think inside styles for now there you go you can see that's just there so now i'm going to show you how you actually get started with you so to actually add it to your view application what you want to do is go import and you're going to say create pina from pina and then you can actually just do this i'm going to break this down so you can see it i can say dot use just like you would with let's say we a few router if you're in doing view router you'd pass in the router here we're going to create a pinya um just like that it creates an ap instance to be used by the application there you go so if we hit save pina is now ready to go that's all you need to do to getting started now we need to create our stores so what we do inside the source we create a new folder and i'm going to call this stores we're then going to say um we're going to give it a name so i'm going to call this users.js now this is basically just going to be the user store you can create as many stores as you want so one thing what's good about pina is you're not restricted to one one sort of set of stores so you don't just have to default index store you could have multiple stores so you don't have to just have the you know in fuex you have a store which has a state and you have to put everything in there this way you can split it out and only import it when you need it and you know i'll show you this in a second so what we're going to do is we're going to import define store from pina we'll also just for just for the please stop deleting it uh we're also going to import uh fee for fro or ass uuid from uuid so we're just gonna just so we can use that again you don't need to use this you can do whatever you want with this this is just for my thing so we're gonna export a content you can actually export default here as well if you want to um i'm just gonna export a const called use user store set equal to define a store and basically in here we're going to give it a name i missed a name and this is going to be called users and it's going to be our user store so we're going to have a state in here now the state is going to be an arrow function and it's going to return something so inside of here we could say return and we're going to just return an empty array of users so this is what our state is that's all we need for this day you can add more in here you could have like um current user and stuff like that in here but we're just gonna have users we're then gonna go underneath the state and we're gonna create so you can see here my all i feel trying to say mutations but that's not that's not possible inside of um pina because we use actions only um so we'll create some actions so let's just say actions here and this would be let's say create then we could pass through stuff so let's say the user and now this is how we're going to create a new user so you can see we've got users here so i'm going to say this dot uses that's all you need to do to call users you don't need to say this dot state you don't need to pass anything through this function you just say this dot users we're going to set that equal to oh sorry we're gonna say dot push to add a new user and we're gonna pass through this we're gonna get a dot dot user to get all the information from the user here and you know i'm also gonna put this in front we're gonna say u id is equal to uuid comma past the rest of the user data so all we're doing here is we're creating a new user by pushing a new object which we're going to create an id and pass through the user from our component so we're gonna pass through another object so this user in here would be let's say name bob and then email uh bob bob.com don't worry you get you get what i'm trying to say here and basically what they that will do here is it will say okay so this is now going to be user so we're just going to break this down so this would turn into name and email here as well just like that um just how that is there so basically it just injects this inside of this uh that i just want to explain that in case anyone got lost i apologize if i over explained it as well um so we're also going to then have to delete a user so let's just say an id in here um and then we could say this dot user sequel to use this filter out the one with the id um and there you go so that's as simple as that now we're gonna have a get us and get us obviously allow you to get users and return them in a different way so we're gonna say useless by name so we're gonna sort them by their name so we're gonna get these state in this when you have to pass through the state and we're going to say const sortable which is going to be our sortable array we're going to say dot dot state dot users we're then going to say return sortable dot sort and we're gonna say a b and then we're gonna use this a dot name dot local compare b dot name so what this local compare does is it basically checks your name it converts it into a number and it and then it'll con confirm it with whatever you pass through so compare it sorry not confirm compare it with b's name and it will convert that to a number a numerical value basically and they will be able to determine which one comes first so by alphabetical order so if this is a b c and this is c b a uh name a will come before b um so that's afford explain that too um there you go so that's a getter so we've got our get us a delete method a create method and our actual state here so that's all we need to do for this user's uh state here but if we want to create another one we could we could create another one we could do the exact same thing and instead of users we could have like admins um and we could have an array of just admins and do the same similar thing we wanted to so let's go to our app here and let's start using this um using this store so how we use it we say import and then we can say use user store from and then we just get the folder so we'll go source slash users we can then create the user store so we say const user store is equal to use user store and that's just going to get the instance off our user store which is currently being used we now want we're going to need some input fields so we're going to use the input and it's going to be equal to a ref um we need to import ref so we're going to say import ref from few few just like that and here you go so now we're going to have a name which is going to be our user's name and an email address which should be our user's email we'll then create a constant called sort and we'll set it to a false because we'll check this and uncheck this depending if you want to sort it or not sort it so let's create a user so we say create user and we're going to set this let me zoom in one here for you as well apologies should the number four so this is just going to be an arrow function um and what we want to do is say if we break down not use it input dot value dot name or not user input dot value dot email so if they're not we're just going to return and we will please enter both name name and email there you go now once we've got that what we want to do is we want to say we literally want to do this use the store dot create user user input.value and that's going to pass through our input fields we've filled out we don't want to reset the input field so we would say user input dot value is equal to name and email there you go and that will reset the actual form for us as well so it'll reset this here so let's actually do the markup for this now so let's just break this down let's just say main and inside of here we're going to have h1 we're just going to call this team manager what i'm going to say form and we'll just do a at submit here dot prevent the prevent stops it from actually reloading the page and we're going to pass through create user in here oh not user create user we'll then have a few inputs we're going to have a text input which is going to be our name um so let's just break this down so we've got text we're then going to have a placeholder this is just going to say e dot g and you guys know me i love my anime so we're gonna say naruto usumaki in here just as the example we don't want to fee model it so we're gonna bind it to the um we're gonna bind it to the file you need so we're gonna say fee model and we're gonna say user input dot name so this will be our name input we can then copy this underneath add in two more and this will be our email and we could say here uh hokage at ninja.com just an example there you go and we'll change this to be an email field to make sure it's validated finally we'll just have one more input which is actually going to be a type of submit um and this is just going to say create user so let's break that down break that down and there you go um my page seems to have died here where's an error somewhere uh resort is my huh it looks like thanks it's doing something weird let's just refresh and rerun there you go um there you go so that's now working so you can see we've got our fields here we'll now need to actually list out our users so this is where we're going to start using stuff so let's create a we'll do the label in a second actually we'll create the sword function in a minute let's just create a diff called useless inside of there we're going to have enough of diff which is going to have a fee 4 on it and this is just going to be user in user store dot uses so this is how we get so now when we want to get our users from our store we just call it as simple as that so what it's called inside of its state we just call users we can then say class of user here and then in here we're just gonna for now let's just quickly say user so let's see if this works so let's just say um tyler t test dot com enter and we have another create user is not a function in our store that's because we call we didn't call it create user it's just create we have named it inside of our store and here you can see it's just called create so let's refresh this and let's try that again let's just do naruto here naruto hokage at test.com and let's just hit create user and there you go you can see we've got a generated id his name and his email address all appearing here we could have sasuke uh sasuke and we could say uchiha at um for last.com because it's the lasso uh there you go um and there you go that's all in there now we can actually sort this as well so now what we want to do is we work on a label um we're just gonna remove that and then our label will have a span called sort and then we'll have an input of type check box and we're just going to feed model this the model to our um sort method there there you go and then when we hit sort what we want to do is we want to go here we're going to set a fee if now this is this quite a crude way of doing it um but it's the only way everything's doing around so we're going to say if it's not sorted we're going to show it like this we're going to copy this paste it in and we'll say if it or fee else so if it is sorted we're going to show the uses by name so to get the getus which we created the users by name all we have to do is actually just do dot users by name hit save and now if we check this local compare is not a function that's because we've actually done something wrong here so here it says a dot name sortable a b a dotname dot local compare a dot name okay guys i have fixed it by basically changing this from being a one line into a multi-line thing here i don't know why it didn't work it just it worked when i did it before it didn't work now so there you go just basically change this to look like this and then we can continue on so back in here we obviously create users by name and that's how we get a getter and here you can see if i sort this oh sorry i didn't name let's just do dot name here as well so you can see we have tess naruto abc and if we actually tick it you can see it actually goes to alphabetical order of abc naruto test so let's actually create this section here so let's just call this a diff we're going to say id and then we're going to say we're just going to pass through basically the user.id if i could type i'm going to say h3 and this will just be the user.name and we'll just have a paragraph underneath that has the user.email in it there there you go so that's what it's looking like so far we basically just want to copy these the innards of this and paste it here and there you go you could sort it and change it round now and that works um so yeah let's try this again so let's say naruto usu maki and we'll just say naruto at team seven dot com we'll have sasuke uchiha at uh sass [Music] useless at team seven dot com um and then we'll have kakashi [Music] hatake at um copy cat.com um and there you go so there we go if we saw this you could see that sort into the correct order um and now so that is all good you can see that's all working here so the sort function works but now let's say we want to actually delete one let's just add a button underneath this and called delete well then create an act click event that's just gonna say uh we'll just call it uh delete user and then we're gonna pass through the user.id and we're gonna obviously copy this button into our sorted function down here and then let's actually create a delete user so we'll say const delete user is equal to id arrow function where we'll say use the store dot delete and then we could just alert user deleted with id um and there you go let's now just go back to our user and check so it's called delete and we say here user store delete id and that's exactly what we do so now in here let's just say we want to delete the useless one uh user deleted with id and there you go she's now gone and you can actually sort this still effing still works and you can delete it so let's say we delete kakashi uh and there you go we now are just left with the two goats of the series the tv show the anime um and that is it so that's how you use pina on a basic level you create a store you create a state you can create actions and get us um and do obviously you can create multiple stores so you could add in more stores here you could have a use store at an admin store you could have like a settings store if you have like a page settings or something on there and a bunch of different stores to actually use to manipulate and make your uh state management a lot easier to handle so guys that's going to be it for this tutorial i hope you have enjoyed it um i hope you learned how to use pinyon how you can get started using pina and if you did don't forget to leave a thumbs up smash that subscribe button if you're new around here and if you have any questions or queries drop them down below in the comments section if you get stuck or you have any issues and you need to share some code feel free to jump in the discord server the link is down below um hop in the help channels and say hey i need help someone please help me and someone should be able to help you out if you get stuck if i'm around i'll try and help you out myself finally guys if you are enjoying my channel you've been around it for a while and you want some extra benefits when we stream when you're in the discord server uh when you're chilling around then consider becoming a member of channel not only does it support me and my channel for me to keep creating more videos but it allows me to actually see you guys i'll be able to interact directly with you in the discord surface we have our own chat for the team for the members um and yeah so thank you guys and for now i will see you in the next video peace out [Music]

Channel: Tyler Potts

Views: 4,895

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: 3zI5MhFFPMA

Length: 23min 12sec (1392 seconds)

Published: Thu Jun 02 2022

Reddit Comments

[u/99thLuftballon]

Nice introduction to Pinia, thank you!

I had one comment, though: you sort of glossed-over the reason why vuex has actions and mutations whereas pinia only has actions (which, I gather from the vid, are the same as vuex mutations). You sort of said "pinia only needs mutations because they work great" or something like that, but the big difference in vuex is that actions are asynchronous and mutations are synchronous. What is different about pinia such that it doesn't offer/need asynchronous updates whereas vuex does?