Learn Vuex by Example - Handling Vue State Management

hey everyone Gary Simon of course zetro so sticking with the theme of view and the last month or two we're gonna keep on going and chances are if you already have a basic understanding of view and if you don't you can check out the very free course that's at Coursera com then you're going to find yourself in a situation where you need to learn view X sorry my computer's going off and so if you X is a state management system so what the state management mean well it basically means the government comes by and they take your money and they say they spend it on a bunch of stuff that no I'm just kidding I hated the government though basically state management is simply just a way of saying your applications data all right so chances are if you have a small app or an app that spits on like a static website just for informational purposes you're not gonna have to worry about using view X but if you have a medium to large-sized application that has a lot of data with components that are trying to access and change it and all that stuff you're going to want to use view X and you'll see why so over here this is the very simple app that we have that we're going to create from scratch and this is just the end result of it so it's just you know it's kind of like almost like a to-do list app or something like that but we just have different links that you can add okay so all this stuff even this my custom title is coming from a property that's stored in the state section of view X all right so that's a very first thing we'll do is very easy and then down here this array is also coming from view X we can also use this very simple input field this form to add you know another link I'm just going to hit that and hit enter we could see it gets added there now this right here is a different component and you know this is one of the use cases or one of the reasons why you'd use something like vu X so that you can easily access that same information from multiple components you can see how it automatically updates the view we can even over here where it says remove all links I'm using what's called a view X action for this one and that allows for asynchronous functionality so what I did is instead of just removing all the links instantly I wanted to try to replicate an action or an operation that would take some time like for instance if you're working with fetching API data it may take some time so I used a set timeout of 1.5 seconds in order for that to show and then we did that with the promise you can also use async and a weight and then a message will disable display once that once these are removed or this I this mutation has been performed all right so very simple as you can see but you're gonna learn a lot all right so let's go ahead and get started here oh but real quick before we begin make sure you check out my psych course cetera comm where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six-pack each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on all right let's get back to it and the very first thing we want to do you want to make sure that you have I your view CLI or the command line interface installed all right so to check that view - V you also want to make sure you have a version that's greater than 3 or equal to or greater than 3.0 or greater than 2.9 basically because otherwise you won't be able to use the view create command they only have like the init command so once you have that installed and you just Google that if you don't mean have that installed we'll go ahead and run view create and I'm just gonna call this view state or you could call it V I'd call it whatever you want alright well hit enter and we're going to manually select the features and that will give us access to the router and we'll just add this just in case you want to add it I don't really think I add I really use it in this project and then also view X and if you want to CSS pre-processing you know go ahead and do that so hit enter I will so having dedicated config files it's not really a big deal don't want to save it as a preset hit enter and now we're just gonna wait all right great so now once it's finished we're going to CD viewstate and I'll yarn serve once we're in it all right and then um well that's working let's go ahead and I want to also show you before we begin developing this is something that's very useful for view development and that is view J s dev tools it's a an extension that you can add to Chrome and you can see it right there view dev tools go ahead and install that and once you have that installed let's go up I'm going to bring up a browser window here alright so this would be let's see yeah local I'm just gonna refresh this this is I believe Adam I haven't running on eight oh yeah I say yeah there we go and you can see now it lit up because it's a view project and if we hit control shift I bring this out here we'll see we have a view tab and we click on this section and this is for view X and this shows us base State and it's gonna show us you know as it happens our different getters and the the the properties that we have stored in the state so we'll be referring to this for a while just so you can understand you know the the usefulness of this tool for debugging and such like that so alright let's go ahead and we're gonna open up our code editor I'm using a commander here since it's a free console emulator I'm just gonna go to here nope what am i doing all right and code period and that's for Visual Studio code it'll just launch that up all right so let's take a look at our source source folder and we have store Jes now this file is created when we chose to include view X in the project all right so it's also integrated here if we go to main j/s we'll see that we have import store and then it's added here as an option in view okay so let's talk about defining a state property which is probably one of the basic things that we can do and so what we can do is let's make a new property called title and we'll say my custom title alright dead simple stuff let's save that and let's go to our components hello world view now this is where all that text comes from so let's go ahead and I'm gonna gut everything actually within those this div class hello and let me get let's see here control B to get rid of the sidebar we're gonna go ahead and put a div class equals left just doing some initial templating here and then also div class equals right and then inside of here how would we access that property that we now defined in the view X state sections so well we'll just do it normally as we would any other property through interpolation that's not the only thing we can do that I'm I mean we're not done yet it won't work at this point if we were to save it the next section will require us to go down to our script section and we're going to import map state which is a helper for us to access the state properties are the data in there from view X all right and then we can get rid of props here we don't need this message we'll put in computer and inside of here for now I'm gonna put map state and I'm going to get rid of that real quick put in an array alright so inside of here we'll just put in the name of the property that we defined which is title all right so we have the name the interpolation property being title and title we'll grab the value from you you X with the help of map state alright so if we go ahead and save this and go back to our console there we go we have my custom title and we can also see with the help of this view dev plug-in we have a base state and we have under state our title property awesome okay so now let's also for instance I we can also pass in an object instead of an array here and this lets us do a couple things one of which being let me go ahead and got all that and put in an object instead and let's say we didn't want to use the same name we want to use a different alias instead of title we can put for instance custom and then title so then we can put custom up here save it and we'll see that it works just the same all right now also I chances are you're going to have more than just map state as a computed property in this section you may have multiple things here so in this case you need to use what's called an object spread operator it sounds complex if you've never heard of it but you do this basically by adding three periods before the map state and using as you normally would so let's go ahead and make the following adjustments so this is what I was initially doing when I started this section was opening up in an object here and then we say map state and we'll go back to what we were using as an array before title title and then now we can have you know other stuff here other properties or whatever so now we can save this it's going to work just the same awesome alright so now let's go back in you know I think when it comes to learning this stuff muscle memory it's all about that too let's instead this time instead of just creating a simple you know variable type of a string variable or property let's go back to our store j/s file and let's create an array alright so we'll call this one links so we open it up into rate brackets and we'll put some initial data first here so I'm going to put in cetera calm and then maybe youtube.com/ alright and in the same way we can gain access to it so let's go up into our template here so we'll say ul for unordered list we'll put in Li V for directive to iterate through a list or link index and in links as that's the name and then V bind key equals index we'll be using this later to help delete all right and then side here derp elation link alright so then one final adjustment map state we're going to add another one or the other one which is which we named links here in store J s so we'll save this go back real quick there we go a very ugly ugly list alright so now let's talk about view getters so to this point we've been using map state the Maps tape helper to directly access the data contained in the state now this is fine when no computations are needed or need to be made on the data itself but when you're doing with multiple components you may find yourself duplicating code and necessarily when transformations need to be made on the data so this is where getters come in handy so let's go back to our store j/s and let's say for instance that we want to count the number of links in our array we don't just want to return it because that's what we would simply use our map state for if we just wanted to return the data as it is we want to count and perform obviously some type of operation or a function on it to get the number of links here which we know is three at this point so this is where we would use a getter and by default they don't have getters added here so we can just add right here just into sections put a comma down there and the way we would do this we define the name of it first so the name of the getter will be count links alright and then we'll say state so we're passing in access to the state by calling state there and then we're going to return state dot and then we'll see we have a pair of links and title it's the two properties or in or the pieces of data that we have available up there so state we want links and then we just run a normal JavaScript length which will get the number of items here so now let's just go ahead and go back here and because I wanted to illustrate you know the fact that you you know the usefulness usefulness of this with multiple components we could just do all this this next stuff in the same component just to count to to show a display here but I'd rather do it in a different component so let's go ahead real quick and I before we I'm going to duplicate this file but before we do that I'm going to go back here and div class right and we're going to add an import for another component that we're gonna call stats and maybe stats about the list or whatever you want to call it and up here we're going to import this file doesn't yet exist we'll create it momentarily it'll be called stats dot view all right and then also we have to add components down here property where we pass in stats which is the component all right and then next we'll save this and we're open up and I'm just going to ctrl-c ctrl-v right-click rename call the stats view so now with stats dot view selected we'll make some adjustments here this is actually asleep what's going to go on on the right-hand side of our app so we're gonna gut everything between the div tags of div class hello i'll changes the stats and then in here we're gonna put an h1 of let's see a different component just to let us know that's a different component and then also a paragraph there are currently Terp elation count links links all right simple enough now in the scripts section we don't need to import that obviously we want to import a new one called map getters so obviously you'll you'll notice a trend where you have map i'm you have a map or a helper for each of the sections in storage a yes essentially so map getters is forget errs and then down here we're gonna name this stats and we don't need component section and for computed instead of map state will use map getters and then in here it works the same way the name of the getter that we created in store j s so it's called count links all right so now if we go ahead and save this with any luck it'll show us all right so now we have a couple different things happening we have a list up here and then we have our new component a different component where it says there are currently three links and you can see has a new section down here called getters with count links being currently three awesome all right so now at this point this is so ugly and so if you know if you're new to my channel I almost every tutorial I write there's a written version where it also has code it's the very first link in this in the description of the YouTube here click on that and you're gonna see this massive long three thousand word tutorial that I'm currently following as the basis of this video and I'm telling you this because I there's a section where it has a lot of CSS so I want I just want to format this stuff to make it a little bit better I'm a designer I can't help it and it's right here in this section of the the tutorial let's take a break and make this look better and so what I'm going to do is just real quickly copy and paste a few this a few of these things so that um I just lost my my point there there we go I'm gonna copy this is going to be in hello world view in the Style section so I'm just gonna copy the whole style section right here so let's go back here real quickly hello world go to style overwrite that stuff we're gonna save that we're also going to copy real quick sorry I'm trying to find I'm losing my place here in app view there's a couple changes that we need to make for source app view so I'm just going to copy the template all the way to the end of the Style section so let's control B and we'll go to app dot view so copy that I just gutted all the other stuff I just have the router here and got rid of some of the rule sets keep we kept this font-family here we'll save that and then coming down here for source views home view I'm just gonna copy all this I'm not really changing much here it's just I getting rid of some of the like the logo and stuff I can home dive you had the logo we don't want that yep and that's good I'll save that and we'll see if there's anything else that I wanna make so it's almost good there all right awesome okay so everything looks a lot better I could stop by panicking that's just remember how crappy it looked so now let's go ahead and continue on learning about vu X so the next section is going to be about mutations so to this point we've only added display data from the state so what happens when we want to change the state data so that's where mutations come into play so let's go back to our storge s file I'm going to get rid of I just a couple of these all right and let's say that we want to add a new link with a form input field which doesn't yet exist on our HTML but we'll worry about that after this section so we can see we have our mutations section down here so let's go ahead and add a new mutation that will allow us to add a link so it's a standard practice to have these all capitalized so add link for the name that's how we will reference it and we're going to pass in this state for it which gives us access to the state properties and methods we'll do a link as well and this is basically a payload where you can optionally send in data in order for it to add it's it's optional but it obviously being that we want to add a new link then this means by extension that we need to pass in that data so our function here so we're gonna say state links and then push and this is just regular JavaScript to push data to a new array so link is coming from here that's going to be the user submitted content and then we just add it in that way all right so now let's go ahead and save and we're going to go back to our hello world view file and up here we're going to add a form just between h1 and the unordered list so it's gonna be form add submit prevent equals add link so that'll be a custom method to add a link when this form is submitted when we hit enter and then we're going to put input we'll give it a class of link input and also type is text placeholder is add a link and then v-model directive sorry about that equals new link and we'll define that momentarily all right so then coming down here in the script section we're going to add a data property because we now have our V model bound to a new property so we're gonna put in data and in here we're going to return new link by default it will be empty all right okay so let's put in a comma here and now what we want to do is add a new section methods so let me just get rid of this we're gonna put a comma here at the end of computed and add methods alright so by the way we need to add before forget map mutations and there we go with that similar pattern you know we just work with mutations now we're going to add map mutations in order to get access as a helper so now inside of methods we're going to use the three periods map mutations and we're going to pass in through an array the name of the mutation add link then comma and this is what gets called the method that we refer to in the form add link and we'll say this dot add link and this is basically this this map mutations transforms add links so that we can reference it by this dot add link and then simply pass in because we do have one argument there this dot new link which is going to be the value of that input or the submitted import I form element so now then we can reset it to empty when somebody hits enter all right so I also because we did add a new input I want to add a quick roll set and this code is also available on the written version just a quick whirl set here for the input button to style it better and now let's give it a try all right so here's our new input field if I hit anything here and then hit enter there we go you could see how view this view dev tools it recorded this new add link mutation that was committed and it praised us with or it provides us with all the information over here awesome awesome stuff wait why can i it's like not letting me select this all right there we go so I let's add a couple more mutations except it's this time we're gonna need to use actions to perform the mutations so calling mutations directly in the component is for synchronous events now should you need a synchronous functionality you can use actions and this time we're going to use an action to a call upon a mutation that will remove a link and it's gonna seem a little bit redundant but you'll get the hang of it so we're gonna first add a new new mutation and so we're gonna name this remove link States link it looks very similar to the one above and then state links dot splice we'll pass in the link which is the index really and one and that'll remove the given link when somebody clicks on a remove button now for actions we're gonna name it remove link here now this time we pass in ia context and this simply provides you with the same methods and properties on the store instance and also the payload or and this and this it's the same situation happening here for the link this is the data that gets transferred when somebody clicks the button so then right here we call upon context commit and this is how we call upon a mutation remove link we simply put in the name and then we pass the data of link along with it all right so we're going to modify this a little bit just to introduce a promise in here which you can also use a sink and a weight but we're going to use a promise all right so now let's go back to hello world go back up top and we need a button to allow people to remove something so button V on I'll say click equals we'll call a method called remove links you don't want to name it remove a link because we already have something stored there and you'll get an error that shows up so you want it to be a unique name so index and class equals RM for remove we'll style it in a second and then the button all right so very simple button here someone clicks it it calls remove links method and it passes in the index all right so now let's go ahead and once again add in map actions which is a helper ok so now we're going to under methods and under map mutations add map actions we're going to put in remove link and that's the name of the action and then also remove links property or method their function we pass in to link and then this dot remove links link and this remove links comes from this part right here from map map actions and actually this shouldn't be plural there we go all right so let's see also real quickly I'm just going to copy a rule set again put it at the bottom for the RM class save that and let's give it a go so this will allow us to remove one of these results so if I click remove from course set row there we go we could see that is been called over here this mutation of remove link alright awesome so we can also see that it still works how it needs to alright so this isn't really that exciting so let's try actually demonstrating the value of using actions to perform these async operations so let's go back to our storge s and we're going to create a another mutation and one more action so the other mutation here is going to be called remove all so let's have a button where one can remove all of them we pass in the state we don't need to pass in any type of data so we can just put that and then we're gonna have state that links equals that's it we're just gonna empty it out all right cool so now in actions let's put a comma here we're going to name one called an action called remove all and then we're going to put in commit and then we're going to return a new promise and if you're unfamiliar about promises I would definitely suggest doing a quick search on a tutorial so you can learn about them you'll see kind of how it works here in the context of this simple app and we're going to just simulate something like an action that could take time set timeout and inside of here we're going to commit and again this context how this has passed in here is different than how we did it up here in this case right here we can I it's less verbose we can we can use less code in order to achieve the same thing but this is basically what we're doing here is the same thing right here we're simply calling a mutation so commit and we'll say which one the one that says remove all and then resolve and then the length of time will say 1500 milliseconds or 1.5 seconds all right so let's go ahead and save this and we're gonna do this time in the stats dot view file so we'll add a button here up in the top and again I'm just putting in this one and just kind of going back and forth just to show how easy it is to use view X and how useful it is to have everything in that one section or though that one data store right there so let's remove all links for the text here all right so remove all links we have to create that but we also have to import two other things so map mutations and map actions all right so we data here we're going to return oh I forgot to put this into the template a property called message we're going to put it right here and so we're only going to show the message after it is finished removing all those links through the set timeout and that's where the the promise helps big time so what we'll do now is under methods we need to add it we're going to say and this is going to be very similar to the previous or to the other file map mutations only up one so I'm just going to keep it on one line and remove all also we have map actions which one do we lean on to access it was called remove all and then we also need to reference the remove all links method and then we're going to say this start and then the name of the action which we can reference because we use to map actions helper so this don't remove all then execute the code in here once it is finished so this would be this dot message equals they have been removed and there's a error somewhere right here there we go all right they have been removed and we should be good to go one final thing before we give it a test another style for our button very simple stuff right there and let's give it a try alright so I just add one everything there still works consoles looking good no no I errors or anything and let's try this so we're gonna click it nothing's gonna happen for 1.5 seconds and then we'll get the message and these will disappear awesome awesome awesome stuff so hopefully you were able to learn quite a bit throughout that tutorial I know is a little bit more lengthy and of course you know I in the context of a real you know medium to large-sized vu application you know your your view X when it comes to your state and your your mutations it'll get really large and obviously probably more complex than what we dealt with but hopefully that will give you a primer a basic rundown so you can then go on to create bigger and better things alright make sure you check out course central calm and as always subscribe here I this is my full-time job basically so all lot more content to come and I'll see you guys later

Channel: DesignCourse

Views: 91,323

Keywords: vuex, vuex tutorial, vue tutorial, vue 2 vuex, vuex state, vuex mutations, vuex actions, vue state management, vue state, vue mutations, vue actions, vuex getters, vue getters, tutorial

Id: ZSexhaiMKJE

Length: 34min 38sec (2078 seconds)

Published: Sat Mar 17 2018