my name is Tim Bennett and this is a turbo tutorial tutorial we'll go over how to use Pina the State Management tool of view and next we'll do the installation adding a few easy tips and tricks to make working with it better plus we'll go over all the basic features to just show you how you can get started alright let's do this this is a completely clean nox3 installed but I've added the next Pina module so when you install this module there's a few little things that you can do to next to make working with Pina a lot easier especially something like this so there's an Auto Import property in the next Pina module that allows you to automatically import the Define store and a few other functions you might need throughout your next app so you can always use them without having to import very handy in a similar vein you can actually add the stores directory to the Imports of next three this is the same as like when you put anything in composables your composable just works it's automatically imported well I've done the same with this stores folder and in which I have a bunch of store files for pina and they just work everywhere in Knox now and so that just helps us a whole bunch when working with this tool and then lastly when we look at the store itself we'll have a look at what the store is in a second I've added these few lines and so this allows feet the engine that runs the whole thing to understand that if you change anything in your store file that it needs to run a hot module reload and so whatever changes here updates on the screen directly no refresh needed really handy stuff all right so let's go over the store that I've created and I've kept it very simple because this is a basic tutorial to just get you going and so I've used the name use friends store I love the TV show Friends and if you don't know it or you're too young go to Netflix and check it out it's really fun and so I've added the state here and so the the heart of State Management tool Like Pina of course is the state this is where everything happens and so the basics of the data that we're dealing with are in the state and in this case these are the characters with Rachel and Ross breaking up iconic scene and so you can do an action from elsewhere to update whatever happens in this state or you can do a getter to get anything from that state specifically if you want to like have to find the name and then based on that get back let's say the liner that they're saying because if it's literally just one item that you're getting from the state you can do that directly you can access the state from your code and just get it but if you have to find something or manipulate something to get the data you use a getter that's what we're doing here all right so how is all this actually working in the browser well first of all I made a little component called lines.view because we're speaking lines right we're characters and so I've actually done use friends store because of the setup we did in the next module we can actually just use this and it just works and so I'm grabbing the characters from that store through the stores to ref function and that is a very handy helper function that whatever you grab from the state it makes it into a rough Infuse so it's reactive so if the state now changes it directly updates in the browser and so we're grabbing the characters from the state and just putting it in a pretext so you can see that and let me just refresh this okay here we go so it's back to the original state so we have red we have Rachel and Ross anyways now we have things like actions and Getters and so let's first add an action to be able to add something to this state and so if you have no the Keen height among you have seen I have a add character function so it adds a name and a line that the the character is saying so it's literally just grabbing the character's State and pushing a new object in it and so um let's add that to our code so first of all we need a function to be able to add something to the state and in this case this we're going to add Joey because he's also yet another iconic um character from the show and of course we need a button to be able to do that so let's put that here and so now when we click this button it's at Joey with the name and his line well you see because of the auto HMR and all the fun stuff that we added on the in the intro here this just Auto updated and so let me just click Joey and suddenly the state is updated and now we have Joey here and that just worked really really simply and so what we can do now is also use the getter to get some specific information out so what we can do is potentially only get Rachel's line so let's just add an our getter because that's like our get line by name function we have a look here get line by name so I'm just searching for the name inside the characters right and when the character name that it's searching in has the name that I'm giving the function it Returns the line in real life you might be a little bit more defensive with this code but this is for an example and so when we actually want to see Rachel here um let's just go here line now we should just see Rachel's line and there we go so we can also go for just Ross's line and there we go that's all I wanted to show you about Pina feel free to add any questions in the comments and happy coding cheers [Music]