Vuex 4 Crash Course - 2021

hello everybody welcome back to the channel and as always welcome to a brand new crash course in this crash course we're going to cover everything that you need to know about vux and specifically we're going to be working with vue x4 which is uh the ux version needed if you are going to create a view 3 application if you are creating a view 2 application then you would use vue x3 now because this is the latest version i'm assuming in the future that's what most people are going to be using and that's why we're going to specifically work with vue x4 so i'll talk a little bit about what vue x is in the next video but right now you can just kind of think of it as a state management system so i'll talk about that again in the next video but let me quickly discuss what the project that we're going to build is so this is the project that we are going to build uh essentially with vue x so this is actually going to be very view x heavy and is going to contain almost every single concept that we need to know about vue x so it seems like a relatively simple application it seems like a little counter over here it's it's not a really big deal but it actually deals with almost all facets of ux so over here very simple counter so you can actually let me actually zoom in a little bit so over here we have a very simple counter you can actually increase the number so maybe you want to increase the number by five well we can see here now we're at 265. we can also decrease the number we can also add or subtract by a random number and what this is doing is actually fetching a random number from an external api so the reason why i'm doing this is because uh we want to be able to use vuex with asynchronous uh uh a kind of request so this is this is how i'm gonna show you guys how we can do that so this is how we're gonna be dealing with ux through asynchronous requests and also over here we have basically history and this is again another cool feature that we can do with ux and basically like it it simulates all of the uh the history of all the counters that we have so if i were to add this by one you can see here that now this is uh 12 1200 and you can see here that this is appended also and over here we can basically search for a specific number so you know we can search for six over here we don't see any number with six let's say we want to search for 249 and we can actually search for that and we can actually see all of the 249s and this is again going to be done through a really cool ux feature known as getters so uh that is basically the project and again it seems like a relatively simple project but i believe it covers pretty much everything that we need to really know about vuex so it's a really kind of good beginner project and lastly if you we're going to be building this project from scratch so there's nothing really that you have to clone but if you want to take a look at the repo in the code it's all over here right now it's a private repo but you can go ahead to my github link and when this video is published it will be public so just go to my github repo and then vux4 crash course and you should see all of the code so that is pretty much it uh so that's basically what we're covering in the crash course now in the next video let's actually start discussing what in the world is ux okay so let's answer the question what is view x now view x is a library that helps us manage state in our view application now what do i mean about state state essentially is pieces of data that reside within our view app for instance if you scroll down over here there's a quick little example over here we have a simple view component and then in the data method we have a count variable right over here and this right here is a piece of state now this state is located in our component so essentially it is only accessible by this component now if we wanted this com this state to be accessible by other components in this case we would have to pass it down as props now that can be a little bit problematic and let me kind of show you why let's look at a quick diagram so over here i have basically a view app and i have basically the component tree so over here we have our root component and it is it has basically three uh child components and each of these childs have children of their own so you can see here this has two two children components this over here has a child component of itself and then this one has another child component so you can see here that it is a relatively large application now let's say that this component houses a piece of state over here hot dog so this is this component houses this piece of state and let's say that well this component over here needs that information so this component needs that information and let's also say that well this component right here also needs that information so somehow someway we basically have to pass this state over here to these components so there's a little bit of a problem with getting this piece of information to these two components let's actually discuss them in detail right now so if i want to get this state to this component well what i would have to do is i would have to pass it down so i would go ahead and basically pass it down as a prop to this component over here even though it doesn't even need it and then this component would pass it down as a prop over here so this is kind of a tedious task especially if we have multiple components maybe if we had seven and we had to pass it all the way down we would have to go ahead and pass it down each particular component even though it might not even be using it to get it to the correct component that actually needs it this is actually known as prop drilling and this is kind of a problem that vue x solves so again this is kind of a problem that we are facing another problem is there is actually absolutely no way i can pass this piece of state to this component over here with this architecture the reason for this is you can really only pass them down or you can pass them up so i guess you could pass it up and then pass it down but you can never pass it sideways you can never pass it in a lateral fashion because well these are siblings and you can't pass props through a sibling manner because well there's really no connection between them as you can see so so really we would have to do something very very awkward like passing the prop up and then passing the prop down and then pressing the prop back down so it might even be better to actually have that state located somewhere over here at the very top and then go ahead and pass it down but you can see that this really is kind of awkward it's very awkward over here we have prop drilling over here there's no real way to kind of a pass state in a sibling manner so this this really gets very very awkward and this is basically what vue x is trying to solve essentially view x solved these two problems and let me show you how it does it so basically view x what it does is instead of having basically this piece of state that is needed by many components of in our application you know throughout our application instead of having it housed in a particular component we have it housed separately right over here so we have it housed separately kind of outside of the component tree and essentially it's housed in this store so this is this view store and literally any component that needs it whatever wherever it is located all it has to do is say hey i need the hotdog state and so what ends up happening is okay no problem i can give you that information so i'm going to give you this information hey i also need the hot dog state no problem i can give you that information very very easily and then this one over here is going to say the exact same thing hey i need the hotdog state and then over here you can just get it very easily so you can see here that all these components they get all the state that they want without any pop drilling or kind of the inability to pass state from a sibling manner and that's because this really important state that is needed by multiple components is actually housed in a centralized store and this is basically known as a global state whereas this state over here is known as a local state so we want to use global states and thus we want to use view x if basically if basically we have a piece of information a piece of state that is used heavily by multiple components and they're kind of just just passed down everywhere so again if we have a piece of state that is needed to be used by multiple components that is when we use vux and that is essentially what i am going to teach with this application over here and so i hope that kind of summarizes what vux is now in the next section we're actually gonna go ahead and just start coding this application so i'll see you guys then okay so the first step that we have to do to actually create this view application is to well create a view app so to do this well this is very very easy all we have to do is go to our terminal if we're on mac or our command prompt if we are on windows machine so i am going to go to the terminal over here this is the terminal and let me just quickly zoom in so everyone can see what is going on here there we go okay so here is our terminal now in here we're going to do a little bit of commands just to create our view application now this is only going to work if you have node installed if you don't have node installed we'll just go to the node web page and just install it you'll get a quick little wizard it's a very very easy installation process to check if you have node installed you can just simply do node version or you can do something like npm version because if you installed node it also comes with npm if you get some sort of version over here then you know you have node installed if you don't get a version you get some sort of error then we'll go ahead and install node another thing that you need to install is the vue cli and you're going to want to install this globally now to check if you have the view cli installed you can just simply do view dot version over here similarly i kind of get a bunch of output right over here so i guess it's not view version but if you do view on its own and you get some sort of output that means you know you have the view cli installed if you do view and it gives you trigger some sort of error then you don't have the view cli installed go ahead and install it by doing mpm install at view cli or at view slash cli and you want to install this globally so go ahead and install it globally now i am going to just quickly cut this because well i already installed the cli and this might take a little bit of time but this is basically what you would have to do to be able to essentially get the view commands so let me just quickly cut this and there we go so once you install it you should be able to do view when you get a bunch of this output right over here so yeah just go ahead and do uh install at view cli and you want to install it globally now the next step is to move into a directory where you want your view application to reside now in this case this is going to be in my desktop so let's go to desktop and then in my desktop i have a specific directory for my youtube videos and then i'm going to uh i also have in youtube my view x directory and this is where my essentially my ux application is going to reside so over here i'm going to do something very simple i'm just going to do view create and then i'm going to essentially create an application and then i can basically say you know what i want to call this so i can just say something like view with view x i'm going to call this tut because this is a tutorial so i can go ahead and actually create this and give it a little bit of time let's see how long this takes i would rather not pause the video but over here you can see here that it's saying hey do you want to work with view 2 or do you want to work with view 3 or do you want any kind of manual configurations in this case we're just going to work with view three because well we're going to be working with view x4 which is specific with view three so let's enter that and then this is going to take a little bit of time to kind of configure so i wouldn't i'm not sure i'm let's see if i can stall enough because i would rather not pause the video but i think i'm going to have to pause the video so once you have this kind of set up and installed in the next video we're gonna actually just open up the project and kind of maneuver around the components okay so now that it is installed let's go ahead and run this application so as you can see if you get this little kind of information you know you have installed it correctly over here this is how we run our application now i actually had tried to run it beforehand and i actually completely forgot that i have to move into that directory so let's move into the ux uh view with vuex tutorial directory or whatever it is that you called it so view with the ux tutorial so i'll move into that directory and then i'm going to run npm run serve so let's go ahead and let's do npm run serve and once we do this you can see it is starting our development server it should be a very very quick build and now you can see that our view application is running on localhost 880 so now let's actually go to localhost 880 i'm going to keep this version even though the actual server for this application is actually closed i'm going to keep this version just alive and well for now i'm just going to open up another localhost 880 and we should see our new view application and this is essentially what you should see as well so let's go ahead and let's kind of configure it so it looks a little bit like this so let's go ahead and let's go uh open up our view application so open up your favorite code editor i'm gonna be using vs code and so once you go into vs code just open whatever uh directory so this is gonna be in my desktop i actually have a better approach so you can either open it up uh um in your desktop but what i could do actually is is just kill the development server and just simply do code dot and that just simply opens it up for me at with that directory now i can go ahead and just start it again and there we go now i'm running my app again so let's actually uh put this in here and there we go so now we have our view app and you can see here this right here is the root component this is the app.view and this is basically corresponding to everything that we see right over here so let's actually do a little bit of well cleanup let's get rid of the hello world component let's also get rid of the import for the hello world let's get rid of this for now uh and then we'll keep everything else the same so we'll keep that view logo and let's give this a quick save and we should see a little bit of changes so over here you can see that hey everything over here changed all we have is the view component so let's actually go about now and create the counter so we're just going to work on this section for now we'll work on this section a little bit later let's actually go ahead and let's create this counter now i want to kind of do this in a way where it really demonstrates the benefit of ux so what we could do is we have a bunch of components over here what we could do is we could just simply create a counter component and uh kind of just display that on the app that is what we would typically do but i want to kind of demonstrate the power of ux and to do that what i'm actually going to do is i'm going to create uh four other components and all these other they're just going to kind of be dummy components and essentially they're just going to be a bunch of children components that uh essentially eventually house the counter component if that doesn't make sense let me kind of explain it to you right now so over here i'm going to create let me quickly just zoom in as well so i'm going to create a let's say component one so this is component one dot view and essentially uh let's create a typical uh uh template over here so let's go ahead and copy this let's paste this in there let's get rid of this logo and this is get rid of the name as well and let's also get rid of these styles essentially this is that's it for this component but this is going to be the child of the app component so let's actually go ahead and let's import this so let's import oops not in the export default right over here let's import component 1 from we're going to import it from well uh dot slash components slash component one and so essentially we're going to render component one so let's let's go ahead and let's render component one right over here so that's what we are going to do and then also we have to of course define the components so you have to say here's the components and well we have component one that is a component that is in our application so if we go ahead and we look over here uh and we quickly do a refresh it seems like we are still have some sort of an error so let's see why that is so it seems like we have module error the template requires child elements so let's let's see here so it seems like this seems okay to me oh of course we need well a div so let's uh create this div right over here i think that's what this is trying to talk about so let's save that and now if we go ahead okay now it works so now let's actually go ahead and let's create another component so we're going to create another component we're going to call this component 2 component 2 dot view and this is going to contain exactly the same template but this is basically going to be rendered by component one so let's go ahead and let's do a similar import so we're going to do import component 2 from component 2. we're going to have over here all of the components we can also give this a name but i'm not going to dwell on that and over here we can go ahead and render component 2. now you can render it either this way or you can render it this way as well what i mean by that is you could do something like this but i like it i like it i like it with capital because it just seems like a component so there we go so this is rendering component two now let's actually go ahead and create another one so let's create component component three dot view let's also create component four dot view and then basically component three dot view is a child of component two so let's let's basically save let's actually go ahead actually use this template this might be a little bit easier so let's let's copy that in there let's copy that in there and essentially over here we're just going to change this to three for component two three three and then three and then for component three essentially this is going to render component four so four four and then four over here also four let's make sure i change that over here and then for component four this is actually going to render our counter component so over here we have our counter dot view so let's just paste that in there this we're just going to get rid of any kind of components that we imported because this is going to actually be our counter so we're going to say here an h1 of uh what do we call it over here we called it view x counter so we're gonna say view x counter so let's save that and over here this is gonna be uh well the counter so let's change this to counter and we're going to be taking this counter right over here and then we have a counter and over here we have a counter so you might seem you might see what in the world is the point of this and in reality there really is no point of doing it this way this is actually a very bad way of doing it uh but the reason why i want to kind of demonstrate this is because well this is a very likely situation in our app we could have right here our root component and this is rendering a particular component right over here so this is component one now this component can be rendering another component component two and then this component could be rendering component three and then this component could be rendering component four and then this component is rendering the counter now the issue might lie is well the app right over here might house all of the state regarding to the counter so that maybe we basically need to make some sort of http request in the app itself and that's where the the basically the information lies so essentially if we ever wanted to get it to the counter right over here we would have to pass that information down right over here to component one and then component one would pass that information to component two and then that information will be passed to component three and then that information will be passed to component four and then uh that information would eventually be passed into the counter and then the counter can deal with it now again this is prop drilling and this is not what we want really and that way and this is kind of the reason why we want to use vux because we can just basically have our state in some sort of centralized store and essentially we can basically just get access to it to whatever component that we want so that we're gonna basically be dealing with this over here this architecture may seem pretty much useless and very bad but i'm just trying to kind of quickly demonstrate the the powers of ux so now that we have basically our kind of app up and running which is terrific you can see here that it's it's getting similar let's go ahead and let's just create uh these parts over here and we're going to create this in a way where we are going to be using the ux so let's go about doing that in the next section okay so let's start tackling our first little piece of this counter component and essentially we're going to initially work on this section right over here so the counter itself and this kind of input section right over here so let's go ahead and let's do this so over here let's add another h1 and we're going to give this a class of counter so let's let's go ahead and do that let's say class of counter because we're going to give us some a little bit of default classes so over here we're gonna have a class of counter and initially let's just hard code it as say zero over here in our styles we're just gonna say dot counter and we're just simply gonna give this just a size of uh five rams this is gonna be a simple font size of five ram just so we can make it nice and big so right over here we should have something that looks relatively like this so let's also go ahead and let's create these input components so let's go here and let us create our button so our button is going to essentially it's over here we're going to have our button this first button is just going to contain the plus sign or actually the minus sign that's going to be our first button and then we're also going to have a input and we're going to give this input right over here or it's not going to have any uh styles but it is going to have a type of number so we can ensure that people don't put any strings in there so we can do type of number let's also copy and paste this button because we also need a plus button so a plus button right over here so we can go ahead and now we have something that looks like this let's just quickly style it so it looks a little something like this just a little bit better this is going to be very very quick styles it's not going to be that big of a deal so let's go over here and we're just going to do a little bit of styling uh typically i would have you copy and paste but this is very very easy uh so we're just gonna do this so the buttons we're gonna give it a border radius of 100 just so we can be nice and round we're also gonna give it a border of none just to get rid of that default border we're gonna give it a width of two rams and a height of two rams as well we're also gonna give it a font a weight of 700 and lastly what we're going to do is we're going to give it a cursor of pointer now the input element we're just going to give it a little bit of styling so over here we're just going to give it a quick padding of 0.4 rims all across the board we're also going to give it a little bit of margin of zero rams in the x or in the y axis and 0.5 rams in the x axis if you don't know any of this it's okay it's fine just just copy this uh this is really pretty much all the styling that we're really gonna do and over here we basically have something that is relatively similar to what we have over here okay cool so now let's actually go ahead and let's work with well our state so there's really two pieces of state that we have to worry about this over here which we hard coded as zero so this is a piece of state that we have to worry about and then also another piece of state that we have to worry about is well whatever the value is of this input uh kind of input element right over here because this could constantly change we can constantly change it to whatever it is and we actually have to store this somewhere this piece of information somewhere so let's actually begin with this over here so to do this we're going to be doing well two-way binding and this is again a view x course so i do expect you to know a little bit of view so essentially what we're going to do is we're going to have a local state and again a local state we're going to do that with data and this is going to return and this is going to return a particular value so a particular value and initially we're going to set this value to 1. now what we're going to do is basically inside of that input we are going to have a v model this is going to basically allow us to have that two-way binding and that v model is basically going to be well associated with that value so essentially this is basically going to contain the value of well this value over here and any time that we end up changing it well there's gonna be two-way binding so now we can actually go ahead and we can basically change it and if we went over here and for some reason we wanted to display the value piece of state we can actually see it change live right over here so we now we know that our piece of state inside of our component basically is changing when we change our inputs now let's actually change this back to zero because this is not really what we want but this right here is known as well local state because this is a piece of state that is only residing in this component right over here now we can also create a counter so we can also create something like a counter we can initially set this to zero and then this over here could also be a counter we can go ahead and save that and similarly we only see zero now but this again is also locally stored now with this application we might want to do this but let's say this counter is very important and this piece of state is actually needed for multiple multiple components well we want to somehow store this in that centralized global ux store now how do we go about doing that well let's do that right about now so let's actually change this back to zero and let's figure out a way where we can actually store this account state essentially somewhere in uh in vue x so how do we do this well to do this the first thing that we have to do is we actually have to install the view x library because it doesn't come off the top with ux so to do this what we would have to do is we would have to do mpm install and then view x at next to get basically the latest version of ux essentially vue x4 so once we install that we should be able to go to our package.json right over here and in a little bit once it installed we should see view x version 4 so now we have vuex installed in our application so this is great now how do we use it well to use it we have to go to our main dot js and essentially we have to use vux to create a store so to do that we have to essentially use the create store method now we get that well from view x so over here you can see here what we can do is essentially we can go and create we can create a store now once we create the store we actually have to well create it so we get this method now we have to use this create store to actually create a store so how do we go about doing that well to do it all we have to do now is essentially essentially all we have to do is basically go ahead and do const store and then this is going to be equal to well create store and this is going to be again a function and this is going to take in an object and then in this object we're going to contain well everything that we need inside of this store now still we haven't really connected the store to our view application so now what we can do is we can do something like this well we can do something like const app is equal to this right over here so we can say this over here which is create app app and then we can do something like well app.u and we want to use this particular store so now essentially the app is using the store that we have created and then we can go ahead and do app.mount and we can go ahead and mount this door so now if we save this well nothing has changed but nothing is broken so well this must be working so now what is the next step well we want to create that counter state and we want to put it inside of this global store well to do this all we have to do is create state so over here you can see that it kind of autofills and states similarly to data is going to be a method that returns all of the state that we want to store in this globalized store so we want to basically store the counter so initially that is going to be zero so if we go ahead and save this now we can go to our so now we can basically go to our counter dot view and actually access this right over here and this is pretty magical we actually don't have to do any sort of connection anything of that nature now how do we basically access this well what we can do is we can do something like this so now for each component because we have connected our view application to a store we have access to dollar sign store and this contains a bunch of objects now to access the counter state we would do dollar sign store dot state dot counter so we can go ahead and save this and now if we refresh you can see here that it is still zero now if i were to go ahead and change this to like i don't know 10 well this changes to 10 which is terrific now we have access to this and we actually have access to this to whatever component so over here we can basically go in component 2 for instance and we can do the exact same thing we can basically access dollar sign store and then we can basically state dot whatever that piece of state is and now we have access to that over here you can see that we have a 10 right over here of course we don't want to have this so we can actually get rid of it but this kind of demonstrates that whatever wherever the component is we have access to that piece of state because it is in our globalized vuex store so this is terrific now there's actually two approaches that you can take to actually access pieces of state from a the ux store so you can take this approach over here or you can take an approach where you can essentially map whatever the piece of state is into a computed object so over here what we can do instead is we can do something like import and we can of course i always do this inside of the export default which is bad so we'll do it over here so essentially we're going to import something from ux and this something is known as map state and essentially this map state what it does is it takes all of the state that we specify and we can basically destructure them in the computed object so essentially we can destructure the map state and this is basically a function that takes in an array of all the state that we want so we can say that we want the counter state so we can actually go ahead and ask for that right over here so we can have basically let's go to our main let's say we have multiple counters so let's say we have something like counter 2 and then counter three and this is going to be let's say 11 and then let's say this is 12. so we could actually go ahead instead of doing store.state.counter store.state.com2 we can basically essentially say here that hey i want the first counter and maybe i also want counter three i believe we have counter three yeah so we want basically these two and now what we can do is basically just say counter so now we can save this and and the reason why we can just say counter is because well we destructed counter in our computed object so now similarly over here we have access to it now we can also go ahead and do counter 3 and we should have 12 but we don't have access to counter two because well we didn't ask for counter two so as you can see here if completely fails we don't have it now if you wanted access to counter two we can basically use this map state and specify counter two so this is a really good way to just specifically ask for exactly what we want so now we have access to counter two now now i just want count this one counter and uh this is really what we are going to be using so we can actually get rid of all these and we can actually just go ahead in our uh in our state right over here so in our state right over here we're just going to change this to counter and now we have counter 10. so that right there is how we can essentially globalize state with view x now the next step is to well be able to change this state and we change the state through mutations and we're going to see that in the next section okay so now let's talk about how we can start changing our state for instance when i click plus plus this should change and right click minus minus it should change appropriately let's actually look at this example over here let's say i have 10 well if i go ahead and press plus you can see that it changes correctly if i do minus it also changes correctly and this right here is well changing our state and changing our state in software development is known as mutating state so to actually do this in view x we're going to be using something known as a mutation and we can actually define this inside of our store right over here so to do that we can have another object known as well mutations and this is not going to be a method rather this is going to be a simple object and within this object we are going to contain a bunch of methods that are going to update our state in some way for instance let's add basically the method that allows us to add a particular number to this state so let's call this add to counter so this is what the method is going to be called and this is going to basically be a method that that essentially takes in two arguments and so the first argument is going to be well the state itself and this is going to be automatically passed into this method by vue x now another argument is known as the payload and this is essentially any value that we want this method to have access to and this is basically going to correspond to whatever this input value is over here so let's say you know we can basically give it 100 if we want to or we can give it a 5 five if you want to or negative five if we want to and that is essentially going to be the payload so the state is basically this right over here this object over here and this is going to be automatically passed in by vue x and the payload is going to be any value that we want to give our um our uh mutation so let's go ahead and let's actually essentially update this counter so to update this counter it's going to be very very easy all you have to do is say state dot counter and essentially we want to change it to something well we want to change it to state dot counter plus the payload and remember the payload is going to be anything that we pass in in this example is going to be a particular number corresponding to the number that we well we have over here so now let's go ahead and let's save this now how do we go ahead and use this in our application well we go to our counter and this is where we're going to use another method known as well map mutations now we're not going to destructure this in the computed because this is an actual method and so we're going to destructure this in the methods object and we're going to do the very same thing we're going to do map mutations and we're going to specify well what what mutations we want now over here we have only one mutation but we could have multiple mutations so we can go here and we can say well i want the add to counter mutation so now what we can do is we can essentially say well at a click so when i click something i want to call this add to counter method so add to counter and essentially we're going to pass in the payload now remember the payload is going to be this value right over here so let's go ahead and let's pass that in now we can save it so now if we go to our example right over here we can actually add numbers in and then over here we can say well if we wanted to change it to 10 well okay we actually run into a little bit of an issue now this issue is not really a vox issue the issue here is that this number 10 is actually going to be the string 10. so what we're doing is we're actually concatenating the string 10. now to fix this issue simply all we have to do is basically parse this value to an integer so we can just do something like parse int and we can go ahead and save this and let's refresh our page so now you can see here we're starting off with 10 we can add a bunch of numbers now if we go ahead and add 10 well this is adding so we can actually add whatever it is that we want which is terrific however at the moment we cannot subtract so let's actually go ahead and let's create the mutation for subtraction so now to do this all we have to do is create another mutation so we can say subtract from counter and this is also going to take in a state and a piece of payload that we will provide now similarly over here this is going to basically change the state in some way so we can say state dot counter is equal to state dot counter minus the payload so now again to get access to this we can just use the map mutation over here and we can say that hey we also want the subtract from counter now over here we can also do another act click and then we can say well let's subtract this from the counter and we're going to pass in the value and this time we're going to make sure that we parse into it so we can say parse int of the value so now if we save this well now we can add a value we can also subtract a value which is terrific and this is exactly what we want we can also subtract the value by a certain amount which is again terrific because that's exactly what we wanted so over here anytime that we want to change a particular state in our globalized store we would use a mutation and that right there is essentially what mutations are doing okay so let's actually go about and let's create this button over here now this button is a little bit interesting because once we click this button we are actually making an http request to get a random number between negative one thousand and one thousand and once we get that number then we are basically adding that number to the state so over here you can see if we do a click you know over here if we add where we subtract you can see it is pretty much instant whereas over here it does take a little bit of time to update and the reason for this is because http requests are asynchronous they need some time to actually fetch the data and then over there we have to use that data to update the state so you can see that there is a little bit of a lag now this asynchronicity is actually very important because it kind of changes the way that we are going to perform mutations and let me explain how so typically we would add a mutation right over here so maybe we can have something where we can fetch the data and then basically update the counter with that data however mutations should never contain asynchronous code mutations should always have synchronous codes if we ever want to use asynchronous code and update our data with emutation instead what we use is something known as an action so over here we can actually create actions and with actions what we can do is we can have asynchronous code and we can basically dispatch a mutation or call a mutation once we have performed our asynchronous code so essentially an action will allow us to call a specific mutation now an action will also allow us to perform asynchronous code and then call that mutation with that asynchronous code and that is why we are going to be using actions so over here let's use our first action so we're going to actually mark this as async because well it is going to be an asynchronous uh uh method because again we are fetching some data now over here let's call this random add random number and this is going to basically contain the context and i'll explain what that is in a second now over here what we're going to be doing is we are going to be making some sort of asynchronous request now to make asynchronous requests a library that i like to use is axios so let's go ahead and let's install axios so let's do that a quick install this shouldn't take very very long and then what we can do is once we install axios we can actually import axios so we can go ahead and import axios into this state over here so import axios from axios and then we can make a asynchronous request so we can basically say well let data equal to a weight axios.get and then over here we specify the string or the url of the api that we are trying to hit in this case it is this url right over here i'll have this url in the description below but essentially it is a uh it's basically an api that allows us to hit a random number between a min and a max over here i set it as negative one thousand and one thousand so if i were to go ahead and just paste this url right in here you can see here let's let's actually zoom in i get a random number right over here between these two ranges so you can see that's what we're doing so let's let's go ahead and now we are making that request now once we make this request we actually want to call a specific uh mutation especially what we want to call this add mutation the reason why we want to call the add mutations because well we could have either a positive or a negative number and that kind of allows us to add and subtract numbers so we want to basically add uh whatever the data that comes back over here into this mutation so how do we do this well this is where we are going to use the context so the context is basically going to contain everything that is typically uh inside of our store so it's going to contain the state is going to contain all the mutations and it's going to contain this special method known as commit and this will allow us to call a specific mutation now specifically we want to call the add to counter mutation and this should be a string so let's go ahead so we want to basically call this add to counter mutation and then we want to provide it with a specific payload now the payload is the data now specifically it is going to be the data dot data now let me kind of show you why with a quick console.log and basically this is just going to be the number that well we have over here and i'm just going to show you a console.log just to kind of tell you why it's data.data but right there what we're doing is we're performing asynchronous requests to get a number and then we are calling a a a a mutation with that asynchronous data and we can only really perform that with actions now theoretically we can perform this with a mutation but it is a very very bad practice so over here we have our action now in this example i'm using it because of asynchronicity but what we don't really need to have an asynchronous piece of code to do this we also could potentially just say hey we have this this this method over here which is synchronous and essentially i want to commit a specific uh a specific mutation at the counter with this payload so this right here is is actually synchronous code so we could potentially do it in our mutations but we also could do with action so it's kind of a two-step layer this is actually the the kind of the best approach of taking it but in this example we're just going to be using it for uh asynchronicity so let's go ahead and we're just going to save this and then we are going to move into our counter component so we can actually go ahead and use it so let us move in there so now that we are in our counter component let's actually create the button so i'm going to create this button inside of a div so it doesn't stay in the same row so inside of a div and this button is going to be a button we're going to give the text of add by random number there we go so if we save this and we go back to our app you can see here very ugly so let's actually fix this up with a little bit of styling let's just give this a quick class of btn and then we're going to go over here and we're just going to say dot btn we're going to give it a little bit of styling so let's see what these styles are going to be so we're going to essentially eliminate the border radius we don't want it to be a circle we'll just say hey b 0.5 rams we're going to give it a width of auto so it can fill up the whole thing and not be confined to i believe it was two rims and we're going to give it a background color or not background clip a background color of hashtag 4 1 b 9 8 3. it could be any color but i like this nice green color this is the view color actually and then we're gonna give it a margin top of one rim we're also gonna give it a color of white so the text can be white and lastly we're gonna give it a cursor a pointer so at that point we have this right over here so now what we want to do is when we call this we want to call that specific action so how do we do this well as always we're going to use the map actions method over here so we can map our actions now we're going to map our actions inside of the methods because they're well methods that we eventually call so we're going to say map actions and we want to map the add random number action so now what we can do is once we click this button right over here so once we go ahead and click this button we want to call the add random number action which will eventually call the uh the uh the add to counter mutation once it basically fetches the data so let's go ahead and let's refresh this real quick and let's give this a shot and there we go it works completely now let's quickly just go ahead and let's console.log let's just look at the console.log you can see here that we get an object so this is an object this is the whole data and then over here we have another kind of data field right over here of data and that's why we're saying data.data and that basically passes in this as the payload but right here this works perfectly fine this is terrific this is great we're pretty much done this part of our application the next part is to well worry about this over here so again this part is where we are essentially displaying the history of our app and essentially if we want to search for a specific uh specific um number so let's say eight five seven we actually see it bolded right over here or if maybe if you wanna see five two three or five two uh two five two we're gonna see it bolded over here and this is actually very very interesting and we can actually accomplish this relatively easily with ux with getters and we're going to get to that in the next section okay so in this section we are going to create that history component right over here that we are missing now as you can imagine this is going to be a completely separate component so let's go ahead and let's create it so over here let's go to our components directory and let's create a new file and we're going to call this history dot view now we can actually uh let's actually go ahead and let's just basically copy and paste a a view template and then what we can actually do is we can basically kind of use this component wherever we really want so let's go ahead and let's get rid of these these components over here let's actually basically render this component in the component three dot view file and we're just gonna put it right under the component four so we're gonna put it right over here and so that to do that what we would have to do is we would have to import the history component from well history and then over here we have to also specify that the history component is a history so our is the history component is a component right over here so now we can basically save this and let's go over here and let's essentially uh add a h4 which is basically going to be the title of history so this is going to be our title and we're just going to call this history so now if we save this this completely fails and the reason for this is it says history component is registered but it's not used and that's because i misspelled history in this component right over here so we can go ahead and spell this correctly in both cases so we can save this and now over here we see our history component so let us do a little bit of restyling just to make everything look a little bit nicer so let's go ahead over here to our history component and essentially the first thing i want to do is just basically give this a class of say container so we're going to give this a class of container and basically this container is simply just going to contain a margin top so container and this is gonna have a margin oh oops what am i doing here so this is going to contain a margin top of seven rams so if we go ahead and save this we can see that now there's a little bit of spacing so now the next step is to basically showcase the history of every single uh counter value that ever existed now this over here can actually be located in the state itself and this could basically be an array so essentially over here we can have basically a history piece of state in our view x and this can be an array now inside of the array we can initially start off with 0 because well we always start off with 0 in a fresh component or i guess in this case it is 10 but let's change this back to 0 over here so over here we can basically say that we always start off with zero so now what we can do is we can basically take this state inside of our history component and essentially map through it and render all of those values now how do we do that well we explored how we did that multiple times so we can do that with well the map state method from ux and essentially over here now what we can do is we can have a computed object and we can basically destructure all of the state that we want now in this case we have two pieces of state in our view x but we only want the history we don't really care about the counter so now what we can just say is hey i just want the history now in this case we can basically loop through that array and for each array we can render a p tag that displays that specific uh counter value so let's actually go about doing that let's first wrap it in e div and let's give this div a class of flex so we're going to give this div a class of flex and this div is going to contain just a little bit of classes itself so we're going to say uh well because it's flex we're going to say display flex we're also going to give it a text align of center we're also going to give it a width of 25 rams we're also going to give it a margin of zero auto just we can center it right in the middle you can also do a justified content of center and also we'll do a flex wrap of wrap again if you don't know this it's okay it's just a little bit of styling but in here what we're going to do is we're going to have a p tag and essentially this p tag we're going to have a v4 in it because essentially this is where we are going to render our uh we're going to iterate through our history state and basically render each number with a p tag so over here what we can have is a v4 so this is just typical view so we can say something like okay well we want the number and the index so let's say the number and the index and we want that from the history state or the history uh yeah state inside of our view x and let's say also the key can be index over here so we can get rid of that error and that is pretty much it now over here what we can do now is basically we can basically uh render that a number so over here what we have now is just a simple zero now if we went ahead and we changed this to four nothing is happening and the reason be is because we're not mutating our state yet so let's go ahead and let's mutate our state so to do that very very simple essentially when we mutate our straight either by adding or subtracting what we want to do is we want to get that number that new counter and we want to push it into this history array so this is very easy all we have to do is state the history dot push and we basically push state dot counter and we want to do this for every single one right over here so we can go ahead and save that and you can save that and now we can go over here now we can add it and you can see that it has changed all right awesome so let's go ahead and let's do something like this okay terrific now the spacing is a little bit off so let's go ahead and quickly fix that so let's go ahead over here let's do a little bit of a little bit more styling just to kind of fix the spacing so let's say the p tag in inside of the div with a clasp of flex we're going to give it a margin of 1 ram so let's go ahead now we have basically a little bit more spacing which is definitely more ideal so now we can go ahead and we can continuously add numbers and you can see here that it well it is basically appending all of our numbers right over here which is terrific now let's say again what we wanted in our kind of final version is an input right over here where we can input a specific number and we can see all of the instances bolded of that number so let's actually go about creating that input and then we'll figure out how we can create the logic using getters to do this so let's go ahead and let's create this input so this input is going to live right below the uh so it's going to live right below the div and essentially over here we're going to have a placeholder of search by index we're also going to have a type of number to ensure that only numbers are available and we're also going to have a v model of well value and that means also over here we need to create our state inside of the data method and we're going to have to return essentially a value and initially we'll have this as zero so let's do a comma and this is basically going to allow us to have that that two-way binding that we always wanted so now right now we can see here that we have that now how do we go about you know essentially how do we go about uh you know when when i click on let's say i want 33 so when i do 33 how do i go about essentially changing this over here well what we could do is on a specific change we can call something known as a getter and the getter is going to contain a bunch of different logic and then is going to give us whatever it is that we want so let's kind of explain that in a kind of a a real life example so essentially what we can do over here is we can define something known as a getter so let's go ahead and let's define a getter and this is also going to be an object so it's called getters because we can have multiple getters in here and essentially what getters are are is a way that we can actually see our data in some sort of manipulated fashion so when we basically call for a state we only get basically that specific number but what if we wanted to basically get the state and essentially kind of manipulate it in some way so we can see it in a different way well to do that we would use getters now specifically in this case what we really want is basically the indexes of the numbers of all the numbers that are equal to this particular value over here and the reason for this is actually go to the production version and let's basically say that we want we basically pass in three well if we pass in three then we want the index of basically zero one two and then three over here and the reason for this is because if we get this index what we can basically do is we can say hey if we once we're iterating through this particular array if the index is basically this if the index that we get is equal to the index of this particular value we can actually go ahead and bold it and we can actually do that with a getter so let's do that right about now so essentially we can basically define a method known as active indexes for instance these are basically all the indexes of the value that we basically passed in now over here this is going to be a method that takes in the state now we also need to be able to pass in the payload now the payload over here is very very easy we can just basically pass it in as a second argument but with getters we actually have to basically call another function essentially to get our payload so we're basically over here we're calling we have a function that returns another function and this first function contains our state and then the second function is going to contain our payload and essentially then this function is going to return the data that we want to ultimately see so over here let's do indexes so this is going to be an array because we can have multiple indexes for instance if i did something like 8 5 seven you can see here we can get this index right over here we can get this index over here so we can have multiple indexes and essentially now what we're gonna do is we're going to iterate through that history state and basically for each element what we are going to do is we are going to say we want basically to iterate through the numbers and we want to get basically that number and that number's index and then essentially what we want to do is we want to say okay if the number that we're currently iterating over is equal to the payload what we want to do is essentially we want to push the index of that number into this index's array so we can do indexes dot push of index and then what we can do here is simply return so we can go ahead and simply return all of the indexes now over here you can see again this is a getter that gives us kind of different data based on different logic but is dependent on the data inside of our state so now what we can do here is we can basically go to the history and to access that specific getter we can essentially use well map getters now over here what we can simply do now is because the getters is just a piece of data and it's not a method or anything of that nature we can just simply put it the structure inside of our computed so we can say getters and what getter do i want well i want the active indexes getter so let's go ahead and let's save that and now this what it is going to simply get us is an array of the active indexes so if i were to let's actually just go ahead and let's do active indexes and let's just go ahead and save this uh right over here so you can see that oops we have to we actually have to call it with a particular index let's actually call it with a value so it's important that we call it and you can see here that it is basically all of the uh so over here this is basically a value of zero and because our history only contains basically one object with zero you can see here that hey the active index is zero now if i were to let's say add one and then subtract two you can see here that we have a zero here and we also have a zero here so basically essentially these are the indexes that we want to bold so how do we do that well this is just a little bit of logic that we can do over here so essentially what we can do now is basically for each iteration we can basically say hey is the index of this particular number inside of this array if it is inside of this array we want to bold it if it's not then well we don't want to bold it so this first number we can basically say well this first number has an index of 0 0 is inside of this array so we are going to bold it this number has an index of one one is not inside of this array so we're not gonna bold it this number over here has an index of uh of two and this is inside of our array so we are going to bold it and we can actually do this with the includes method in javascript so let's actually go about doing that right now so essentially over here what we're going to want to do is we're going to want to create a class known as bold so we're going to create a class known as bold and this is just simply going to increase the font weight to let's say 900 so we're going to increase the phone weight to 900 and basically over here when we are actually looping through the history what we can do is we can generate a dynamic class so we can say okay well if if the active index of the particular value that we pass in now remember this value is going to be a string so we have to actually parse into it so again if the active index of the value that we pass in and remember this is going to give us this array well it was there but it's going to give us that array so this right here this whole thing is going to give us the array and then we're going to say if you know this array includes this particular index that we're iterating over then what we want to do is we want to give it we want to give it the bold class so again what this right here is doing is is going to give us an array of all the indices basically that correspond to all the indices that correspond to a particular value inside of our history array so this is what that is doing then over here we're basically saying if the uh if the index that we are currently or if basically if the index of the number that we're currently iterating over if that's included in this array then we want to give this p element the class of bold so now we can go ahead and we can actually save this and now you can see here that it is bolded so we can actually go ahead let's add by a random number let's let's uh let's add by like you know just subtract over here let's just do a bunch of like kind of iterations let's just do a bunch of things now let's say if i did something like 70 2 you can see here we get all the instances of 72. and that right there is our complete application i hope you guys learned a lot about vuex we covered pretty much everything that you really need to know maybe the next steps that you might want to take is look into modules which allow us to kind of separate our concerns but that is very easy i don't want to kind of dwell on it all too much but it's just basically good for organization but that is pretty much it we've covered uh a lot of what vuex is tackling essentially we've covered everything over here except for modules again modules is just a way that we can actually go ahead and kind of uh separate our concerns because if we have a very large application what we might want to do is we want to basically have our state in multiple modules so you can see here we can have our state in this module and then we can have our state in this module maybe this is basically for the counter and maybe this is for something else like authentication we can actually keep keep them in separate modules but then what we can do is we can actually put them right over here into basically that same store so essentially we have another method inside of our and that's inside of our store known as modules and basically what we can do is we can extract all of our getters all of our state offer actions that correspond to a specific uh uh kind of feature so again you know what we could do is we can basically get all this and put it into a counter module and maybe if we had some sort of authentication data you can put that in another module and then we can just put the modules together so that's the only thing that we haven't manually done but this is something that you can probably read very easily and kind of do it yourself so we really covered basically everything that you really need to know we talked about state we talked about getters we talked about mutations and we talked about actions we talked a little bit about modules so i hope this is a good introduction and i hope this crash course was worthwhile because now you are pretty much a uh a very very comfortable with vue x so i'll see you guys in the next uh crash course

Channel: Laith Harb

Views: 12,926

Rating: 4.9174314 out of 5

Keywords:

Id: y7DQhNs9Azw

Length: 74min 57sec (4497 seconds)

Published: Sun Mar 07 2021