Vuex Crash Course | State Management

[Music] this video is sponsored by Monday comm which is a centralized platform for managing every detail of your work from high-level roadmap planning to the specifics of day-to-day tasks while building a culture of transparency it's fantastic for developers and just about any other type of professional the platform is suitable for individuals and teams of all sizes from a couple freelancers to thousands collaborating across the globe to learn more about Monday comm and what it can offer your business click the link in the description below hey what's going on guys welcome to my view X crash course so about a month ago I updated my view Jay s crash course and I mentioned that I'll be creating a course on view X for state management so in this course we're gonna quickly look at some slides and then we're gonna jump in and create an application using view and view X so what exactly is view X it's a state management and state pattern library and it can be used outside of UJS but obviously it's most commonly used with the view framework it's similar to other state management systems like redux and flux however view X is much simpler at least in my opinion if you've dealt with redux before then you should be able to quickly catch on using view X in fact they'll probably reference redux a few times in this course so view X works as a centralized store for all components which brings us to why would we use view X in our apps now I'm not going to say that every single view j/s app needs to use view X or state management just like not all react apps need to use Redux it's more for medium to large scale projects that have multiple components that need to share state and call actions and mutations to update that state okay so view X gives us a single source of truth for our data and it doesn't matter where that data comes from will be using fake rest api called Jason placeholder but of course your back-end could serve anything what happens when you have multiple components without a state manager is usually pass data up by emitting events pass it back down to other components through props did this in the view j/s crash course but this gets to be a real pain if your app starts to grow and you start to add more components that need to share that global state ok global State with view X is completely reactive meaning that if we update state from one component every other component that uses that state will also get updated at the same time so let's take a look at a diagram to quickly show how this process works so we have our view component which can dispatch an action like let's say login or add post or something like that and that will make or it will make a request here to our back-end API whether it's your own API or some third party API you're working with in our case it's going to be Jason placeholder and then we commit a mutation and that mutation updates or mutates the state in the way that we want so maybe it sets an authentication token it adds a new post and then it renders back it changes the state and renders back to the component our components that need to deal with that state so that's the gist of how it works and this will make more sense once we jump into the code so as far as vocabulary we have a few concepts that view X uses so we have state obviously which is your app level data such as to dues post authentication tokens whatever it may be get ours which are pieces of state or computed values from state that we can bring into our components actions are used to commit some type of mutation to the state so we may have a form to let's say add a blog post we would fire an action and then commit a mutation to actually mutate that state and add that blog post okay we don't update our mutate state directly from the action we commit a mutation okay and finally we have modules for different resources in our application similar to how we have multiple reducers and redux we may have for instance an authentication module that handles state that has to do with logging in and getting tokens and all that we may have a blog post module for adding updating deleting and getting blog posts okay so we might have a comments module so you like you can have multiple modules and they all have their own state getters actions and mutations all right so enough with the slide let's go ahead and jump in and let's start working with view X all right guys so a couple things before we start first of all I just wanted to show you the application we'll be building so it's gonna be a to-do Manager and we're gonna be using JSON placeholder for our back-end REST API so as you can see it's a fake online REST API for testing and prototyping so it offers multiple resources we're going to be using to do's and as you can see we can make get requests post put patch and delete requests and we can get up to 200 - dues as you can see so each to do has a user ID an ID a title and the completed value which is randomly true or false so that's the data we'll be dealing with and we'll be able to make a post request to add it to do so I'll say tests to do will submit you can see it gets added here we can go ahead and delete with the little trash can icon we can set them to complete by double clicking you can see it changes the color we have a little legend here that tells us that green is incomplete and blue is complete so we can change that change that also change it back we can also filter so let's say we want only 50 or we want 20 or 10 or even just 5 - dues all right so quite a bit of functionality in this little application another thing I want to mention is I would highly recommend using the View j/s dev tools if you're using Google Chrome because it shows you not only your view components but it also shows you your view X state your mutations everything like that so it's really helpful and something I definitely recommend when working with view j/s alright so I'm going to go ahead and just close that up I'm gonna keep Jason placeholder open and now I'm going to jump into vs code so I just have an empty folder called view X to do manager and first thing we want to do is generate a view application now you're going to need to install the view CLI if you don't already have it installed and you want to install that globally so NPM install - G and it's going to be at you slash CLI okay I already have installed so I'm not going to install it but once you have that set up on your system you can check with view - - version you can see I've version 3.3 points and then let's just run view create now since I want to create it in this folder I'm just gonna say dot otherwise you could spell it a folder and it would create that folder for you so I'm gonna say yes I want it in this directory I'm gonna choose the default here and it's gonna generate our default application all right so now let that's setup let's go ahead and install our dependencies so all we're gonna need is view X and I'm also going to install Axios which I'm gonna use to make HTTP requests to Jason placeholder and if you want to use the fetch API that's absolutely fine I just prefer Axios so I'm going to install those two dependencies alright and that should be all that should be it so now we can go ahead and run npm run serve that will open up our view application so you can see for me it's on port 8081 so go ahead and go ahead and ctrl click that and you can see we have our default view app alright so let's jump back into vs code and go into the source folder and the first thing i want to do is create a - duze component ultimately we're going to have three different components we're going to have to do add to do which will be the form and then filter - duze and the idea is that we want to access the the application level state and view X from all three of these components and I'm going to show you how to do that but let's start out with just creating the - duze component so under components I'll create a file called - dues dot view and another thing I want to mention is if you're using vias excuse me if you're using vs code I'd highly recommend using the Vita or view durricks tension here which gives you syntax highlighting snippets it allows you to use Emmet within your view templates so it offers a lot it's a great extension for view and using that extension I can actually just say scaffold and then hit enter and it will scaffold out what we need for our view components so the template the script and the style alright so for the template I'm just gonna put in a div for now and let's do an h3 and just say to do's and in the export default we want to export the name which is gonna be two do's and I'm not going to go over the basics of UJS I do have a view Jas crash-course if you're not familiar with the framework itself okay this is a view X tutorial so let's save that and let's go into our app dot view file and we're going to import instead of this hello world component we're going to import to do's and we want to bring that in from - dues dot view and we're gonna change this down here to - dues and then up in the templates let's get rid of all this and let's just put in our - dues component okay and I'm also going to get rid of this default the styling right here and save that and if we go back to our application we should just see - dues all right now I'm gonna have some styling we're not using any framework or anything I wanted to just do some simple custom styling so for the CSS in the main component here and some of the other components I'm just gonna paste it in I don't want to waste too much time typing out CSS so just gonna go down to the style here and paste in a couple things so just some styling on the body and then a container that has a max width and center sit with margin auto so pretty simple and if you want to pause the video and type it out you can do that or you can just go to the repository in the description and grab it from there as well but I'm gonna put a container class around around our component here our to do so let's just bring that up into here okay good and I am using the prettier extension for vs code if you watched any of my tutorials you can you know that I say that over and over just so you know that when I save sometimes it formats things a little differently so just to let you know alright so let's see if we check it out now we have our background color we have every things centered we have the font good so now I'm going to jump right into view X okay setting up view X so the first thing we want to do is in our source folder we're gonna create a new folder called store okay so we want a centralized store for all of our data all of our state and in store I'm going to create a file called index dot JSON Dex J s is is basically an entry point to view X and it's where we combined all of our modules now if you use react with Redux you know that you usually have a route reducer and then you have multiple reducers that you combine together and that's kind of what we're doing here is we bring in all of our modules and we add them to our view X store so first thing we want to do is import view X so we're going to import view X from view X and we're also going to import view alright and let's also import our to do's module which we haven't created yet but we're going to in a second so we'll say import to do to do is from and it's gonna be dot slash module slash to dues all right now down here we want to load view X and the way that we do that is we take view and we just called dot use just like you would with the router and you just pass in you X ok now we want to create our store and we do that by export default new view X dot store and we simply pass in an object with a modules object and any modules we have we just add here so we have a - duze module alright and that's it we'll save it and that's it for this file so in order for that file to do anything we have to bring it in to our main dot jsr application starting point I'm just going to save to format this a little bit with I use semicolons you don't have to but I choose to and then we're going to import our store and it's in a folder called store and since it's called index J s we can just do this we don't have to do slash index okay that'll bring it in and then we just need to add it to our view instance like that okay so I'll save that now we're going to get an error that tells us there is no two dues module okay so let's create that I'm going to close up main J s I'll guess I'll close up app dot view for now and let's open up or let's rather create inside store in our store folder we want to create a folder called modules okay and then whoops that's a file sorry about that we want to create a folder in store called modules and then inside modules we want a file called to do zjs so this is our - duze module and this is where we put our state our getters actions mutations all that stuff now we're gonna make requests from here to our back-end which in this case is Jason placeholder so I'm going to import Axios for that okay and then we want to set want to excuse me we want to create four things here we want our state so we're just going to create for objects our state we want our getters actions and mutations all right so we have these four things now we won't need to export these so let's say export default and we're gonna export an object that has state now we need to do like state state but with es6 since these are the same we can simply just do state I'm seeing with getters and actions and mutations alright so I'll save that and that's basically the boilerplate for a module okay so a view X module so what do we want to do here we want to be able to get the two dues from the application level state with view X into our to do component so for now in the state we're gonna we know we want to do is which is going to be an array and for now I'm just gonna hard code a couple to do's in here so I'm just going to do an ID and a title so we'll say to do one and we'll create another one the ID of two title to do to okay now in order for us to get this to get this state into our to do's component to display we need to add together okay so in the getters let's create a getter called all to dues because that's what it's going to do and this is going to be a function we want to use an arrow function this takes in the state and then we want to return state dot two dues okay because we want to get this part of the state it's actually the only property we have in the state of course we could have more but in this case we only need this to do a ray so we're just returning that from the state so gonna save that and now we can go into our to dues dot view file and we need to be able to use that getter so in the script we want to import something called map getters which does just that it Maps getters from view X to our component it's kind of like how connect works with react redux okay i'll be making a few references to redux because i know a lot of you guys have worked with react and redux and this is very similar easier in my opinion so we want to bring that in from view X all right and the way that we implement the the map getters or how we how we define which getters we want to use is within the computed property so we want to add in computed okay and we want to just say map getters and then pass in an array of the getters we want to use and we only have one which is all to dues okay so just doing that is going is going to allow us to use this getter which remember returns the state which has the two dues okay or returns just the two dues from the state so I'm going to now go up to the template here and I'm going to create a class a div with the class of to do actually to do sorry and within that will create a class of to do and this is this is the div we want to basically loop through and output this div for each to do so in view J s what we do is add a V dash for directive okay so we'll say V for and we're gonna save to do in all two dues okay and we're given getting this error here this linting error because we don't have a key when you loop through something like this you need to have a unique key so we want to V bind a key and we're going to use the to do ID because that should be unique alright and in view we to actually don't need the V by and we can shorten this with just : key okay and then in the div here all I'm going to output right now is the title so we can say to do dot title so we'll save that prettier just kind of formatted it a little bit and we'll go back and we can see to do one and to do to awesome so if we open up our I almost said Redux tools our view tools here you can see we have app we have to do xand it even shows us down here the view X bindings of all to dues which has two objects in it and if we click this right here this will show us basically everything that has to do with view acts so down here it shows us our state and it also shows us our getters so this is this is helpful for debugging and stuff like that and just just seeing the state of your application so obviously actually you know what one thing I want to do before we move on is just add a little bit of CSS here so in the to Do's component I'm gonna go down to style and just add scoped meaning it only pertains to this component and I'm gonna paste in a little bit of CSS I'm gonna have more later but for now I'm just going to style the two do's div and the to do itself okay so we're using the grid system so we have three across and we just want like a background some padding stuff like that so save and now if we take a look where you load it should look like this okay so we don't want hard-coded state right we want to pull it from Jason placeholder so if we go down here you'll see that we can make a get request to this actually we want this right here to do so we want to make a request to this URL to get this data okay which which is actually I think 200 is it 200 yeah 200 to do is here so let's do that let's go to our module so our - duze module and I'm just going to make this state this to do is an empty array again and we need an action that's going to make a request to get a response and then call a mutation okay because the mutation is what actually mutates the state so let's create an action here I'm going to use a sync oh wait so I'm going to label this a sync and I'm gonna call this fetch - duze now when you create an action it actually takes in an object which I'm going to D structure it cut there's a few things in here but what I want is commit because that's what we actually use to commit a mutation we don't call the mutation directly we call it with this come all right so let's make our request okay so it's gonna get put in a variable called response and since we're using a sink of weight we need to say a weight and then we'll use Axios to make a get request to I just do okay we want to make a get request to this URL so go ahead and paste that in here oops I can put an equal sign here and that will get our response okay for now I'm just gonna console.log response dot data and that should get us our to Do's once this is called now I'll go ahead and save this and let's go back into our to Do's component and we need to call that fetch to dues action okay right now it's just going to console.log it's not going to do anything to the state but I just want to show you how we can actually call it so to call actions we bring in instead of map getter as we bring in map actions and where we add that is gonna be in our methods okay which I'm gonna put right here so methods and now I'm gonna have multiple methods so I just want to show you something real quick if we were only gonna have actions as our methods we could actually just put in map actions like this and again it takes in an array of the actions you want to use which in our case is fetch to do is put a comma here so we could do that but I'm gonna have other actions so we're gonna actually wrap this in parentheses I'm sorry curly braces and then just throw the spread operator on map actions so this is the same as doing you know just map actions up here except we can now add other methods down here if we want to alright so I'm just going to leave that for now and this fetch - duze it's not getting called yet we're just simply mapping it to this component where I want this to get called is before the component loads right so there's actually lifecycle methods in view Jas and one of them is computed and that's what I want to use so I'm going to say computed and inside here's where I want to call that fetch to do is and to do that all we need to say is this dot fetch - duze okay so that will actually call this action so now I'll save and as soon as the component is created it should call that action which console logs let's invalid value for our option computed expects should expect that an object Oh what did I do I said computed this should be created sorry about that all right so now if we go back you'll see that it's actually logging all of our - duze all right we just reload that make sure we don't get errors good so we know that it's console logging but now we need to add it to our state so that happens through a mutation so down in mutations I'm gonna create one and I'm gonna call this set - duze alright now this set - duze is going to take I want it to take in a set of an array of - duze which will be this response and I want it to add that to the state okay so this is going to be a function that takes in state and - duze and what we want it to do no pun intended is take the state dot to do is and set it to the two dudes that are passed in all right now up here in order to call this we don't simply just do set to do is or anything like that we need to use commit okay so we say commit the first parameter is the the mutation we want to call which in this case is set to dues second parameter is what we want to pass in which is going to be this okay so this is this being passed in and we're going to set it to our state okay and then it should it should get sent down to the components so we'll save that let's go back and there we go we have all of our two dues in the state that are now showing in the component if we go to our view tools you'll see that set to do is was fire it off okay the mutation we have our state has two hundred objects in it our guitars so good and if we go here you can see our view expanding with the getter so that takes care of fetching the data now I want to be able to to add a new to do so this is where we start dealing with multiple components so in components I'm going to delete this hello world we don't need that let's create a new one new file and components called add to do dot J s okay so I'm going to just go ahead and scaffold whoops I'm sorry J s not J s should be add to do dot view all right so scaffold and let's do a div here with an h3 and we'll say add to do and then we want to export default name will be add to do save that let's bring it into our main app dot view file which is right here so bring in add to do okay we need to add it to our list of components and then let's bring let's go up here and let's put it right above the to do so right here so we'll save that and go back and you can see that the component is being displayed all right now we're gonna want a form so let's go back to add to do and in this component we're going to create a form right under the h3 actually I'm going to put it in a div with the class of add and then put a form no action I'm gonna have an input type of text don't need a name and ID what we do need is a v-model directive because we're gonna bind it to the to the title okay all right we're gonna have data in this component called title and let's add a placeholder that just says add to do and then underneath that we'll have an input with the type of submit value of submit and I'm gonna just give this a class of actually I don't think I don't think we need a class here no all right so let's see we have our form let's save that and it should show up right here now I'm gonna add some styling to this form real quick so let me just grab that and say scoped and I'll paste that in so I'm just using flex on the form and then the the text should be really long and then the submit button at the end I'm also adding the boarder the green border to the button and the text and giving the background the green background to the button as well so now if I go back and I reload you'll see we get a better styled form all right now we're going to need to have an action called add to do right when we submit this we want to call that action so let's go back into our view x2 dues module so I want to go into store modules - dues jjs and inside actions we're gonna put another method so I'm gonna put a comma here we'll say async add to do oops so add to do and then this is going to take in an object which we want to D structure and just take out commit and it's also going to get passed in a title alright when we when we create this it's going to get passed in the title and then inside here we're gonna make a request a post request to Jason placeholder to send this to do along so again I'm going to be using a sink of weight so I'm going to do response equals a weight Axios dot post okay now the post request is going to go to the same URL here so I'm going to just copy that and paste that in now we're gonna send along with this I'm going to send along the title and then I'm also going to send along the completed value as false okay any new to do that it's not going to be completed so that's our request now once we make that and we get the response back all I want to do is call a mutation or commit a mutation and I'm going to call that ad to do right and then or let's call it new to do and then we're gonna pass in that response dot data which will include the new to do okay so down here in our mutations let's put a comma here and let's say new to do and this will take in state and a single to do and then to add I'm simply going to take the two dudes that are in our state and I'm going to I'm not gonna push because I want it on the beginning so I'm going to use unshifted stead of push oops and pass on that to do alright so you can see that the action we're making our requests getting the data but then we commit our mutation to actually mutate the state so let's save that and let's go back to our ad to do component and we want to be able to call that action so in the script here we're gonna import math actions from view X okay just like we did in the other component and to use map actions we want to add in methods and I believe it's the only no we're gonna have an on submit so we're just going to add the spread operator here and then map actions and the action we want is add to do all right so this form here we want to add a submit event so let's say add submit we want to call on submit now one thing I forgot is with this v-model title we actually have to add a data method here that will return an object that has that title so we want to return and just say title which will start just empty alright so whenever you have a V model like this with a property you want to add that to your data in the component which has nothing to do with view X that's just view Jas alright so we have this on submit so we're gonna add that to our methods down here don't say on submit takes in an event parameter and sentences to submit since it's a submit we want to call prevent default so that it doesn't actually submit to the file and then we just simply need to call our ad to do actions so we do that with this dot ad to do and remember what passing in a title so we can access it with this dot title since it's part of the data of this component so it saved that so this dot title will get passed in right here we'll make the response I'm sorry we'll make the request we'll get the response which will include the whole new to do which we commit to the new to do mutation alright so let's try it out we may have an error hopefully not but they'll say test to do and submit and there it is gets added okay I could do tests to do to submit gets added now one thing you'll notice with Jason placeholder is if we look in the console we get this duplicate keys because whenever you add a new value it's always gonna have the same ID alright because it doesn't allow you to actually add to the database and persist and then have an another ID and another ID it's just for testing so this is just telling us that we have duplicate keys so basically both of these have the same key because they have the same ID but if it was a real back-end you wouldn't have that issue okay just like if I reload it goes away because obviously Jason placeholder isn't going to allow just anybody to update their database all right so now what I want to do is delete I want to be able to delete these and I'm gonna add an icon so I'm just gonna go to font awesome and click start using free will grab the link here let's put that in our public index HTML and I'm also going to just change this title save UX to do manager and save okay so now we have font awesome so that we can use icons let's go into our to do's view we're gonna go right under the title and let's do some reason I can't use em it with this so I'm gonna say I'm gonna do AI class and class is gonna be FAS and then FA - I think it's trash - alt let's try that out yeah so we have this trash can now I want this to be in the bottom corner so I'm gonna add a little bit of styling down here let me just find it real quick okay so just positioning and absolute bottom right also adding a pointer to it and now it should look like that so we need to have an action now to delete a pop not a post to do so let's create that in our our module so we have fetch - duze add to do so under add to do we're gonna do a sync delete to do alright and this this delete to do is going to have is going to take in an object we want to take out commit and it's gonna need to know which I which to do it's deleting so we're also gonna pass an ID in when we call it and then we're gonna make our request now I don't have to store the response because I'm all I'm doing is is I'm just gonna call remove to do with the ID I'm gonna have a mutation for remove to do so we don't actually need to put the response in a variable so I'll just say oh wait Axios dots and then we're making a delete request and the delete request is gonna go to this URL but I'm actually gonna put back ticks in here because I'm putting the URL slash and then the ID so I want to go like that the ID is getting passed in here okay so that deletes it from the server hypothetically it doesn't actually delete it like from the database with Jason placeholder but then we're gonna want to commit a mutation so this is gonna be remove to do and we need to pass in the ID okay so let's go down here and let's add in remove to do okay which is gonna take in state and the ID and I mean you could do multiple things here I'm gonna use filter so I'm just going to set the state dot two dues equal to state dot two dues dot filter and we'll say for each to do we want to return where the to do dots ID is not equal to the ID that's passed in so that will remove it from the UI all right so this will remove it from the back end and this will remove it from the UI so we'll save now we need to call this action okay where we want to call it from is our two dues component okay we want when we click this this icon here that's when we want this to happen so let's add let's add a click event here okay so when we click this icon I'm going to call delete to do and I'm gonna pass in the to do dot ID now this delete to do I'm actually gonna I'm going to call the action directly right here I'm not going to create a delete to do down here I'm gonna bring it in right here so in addition to fetch two dues we want to bring in the delete to do action and that's what I'm calling right here alright so let's go ahead and save that let's see if that works and if I click one of these there we go they get deleted so if I add one we'll say test that gets added and can delete it good so the next thing I want to do is filter okay so we're actually gonna have a separate component for that and it's easy to add as many components as you want and use the same state because we're using a state management library if we were to use if we were not to use view X we would have to emit events to pass things up and props to pass things down and it gets it gets tricky and it gets really annoying so you know Redux view acts these state managers really help so let's create a new component I'm gonna call this filter to do is dot view and we'll do our scaffold okay so as far as the as far as the template goes I'm going to put in a div and I'm just gonna say filter to Do's and let's put in a select you don't and you actually need this stuff here let's get rid of this okay and we're gonna do option so value let's do I guess it's 200 I thought it was 100 but I guess it's 200 so we'll do 200 oops that's the default and then let's do 1 2 3 4 5 I think so we'll do 200 100 let's do 50 twenty ten and five okay so that's our select list so let's see we have to put a name for this which is filter to Do's and then I'm just gonna put a little bit of styling in here just for the select which doesn't seem to even work on Mac but I'll put it anyway all right and then all we need to all we need to do here is on when this changes we want to call an action called filter to Do's okay but I'll implement that after we actually create it so for now let's just bring this into our main app dot view so we want to bring in filter to dues and we're going to add this down here to our list and we want to go up here and put this right in the middle of the other two alright let's save that see if it shows up so there's our little drop-down select list whoever the hell it is and we're going to go back to our module now our two dews module and we're going to have another action to filter that to Do's okay so let's go ahead and the let me just explain how we're gonna do this you can limit the resources from Jason place holder simply by putting in a query string if I do question mark underscore limit equals five and I run that it only gives me five two dues so while we're gonna all it's going to happen here is we're gonna just make another request with this limit parameter all right each time we change that select so right here actually let's put a comma and let's say a sink and let's call this filter two dues okay so we're gonna want to commit a mutation so we need to bring in commit let's see we're also gonna pass in the event parameter because we need to we need to be able to get this value here from the Select list okay so I'm going to show you how we can do that let's close that up so we're gonna pass in an event parameter here and I guess for right now I'm just gonna console.log that event parameter I'm not going to do anything else so we just have an action that will console.log the event that's passed in so let's go back to filter and in order to use that action of course we need to import map actions so hopefully this this repetitiveness is is really drilling it into your head how to bring in actions and getters and use them so this is from VX and let's see we're gonna add methods since it's an action and all we're doing is the action there's no other method so I don't have to use the curly braces and spread operator I'll just simply put in map actions with an array that has filter - duze okay and then all we have to add up here is a change event to select okay so whenever this has changed we're gonna call the filter - dues action and we're gonna pass in dollar sign event that'll pass in the actual event all right so let's save that now whenever I change that select list we should see in the console the event so let's change it to 50 and there we go now we need to target the inner value of whatever the OP whatever the selected index so we're going to use some just vanilla JavaScript here to be able to do that all right so let's go back to our module and go back to our filter to do action so now that we have this event parameter let's say I'll just put a comment here we'll say get selected number I'm gonna create a variable we'll call it limit and we go with we want this to be a number so we're gonna run it through parse int okay and inside parse int we want to take that event parameter get the target dot options and then as far as the index is gonna be e dot target dot options dot selected index okay this is just vanilla JavaScript right here and we want the inner text that'll give us the option but the inner text will give us the actual number so let's just console.log now that limit okay so we'll save that and now if I choose 50 you'll see over in the console we get 55 and so on all right so now that we have that limit variable let's make our request which is going to be very similar to our our fetch to do so I'm actually just going to copy this okay so we'll paste that in and then I'm simply going to add on let's change these two backticks because I'm going to add on a question mark and underscore limit and set that to whatever that limit is all right now once that's done all we need to do is commit the set to dues mutation okay because now it's just going to give us the state however that state is going to have the the limited limited to dues okay because we pass in the response data so let's say commit and set to dues and pass in the response dot data and remember if this is 5 this response data will only have 5 okay and again it's just going to return the state which we're getting with our getter so let's save that let's go back let's choose 10 shows us 10 5 there we go 200 100 awesome so we can fetch to dues we can add them we can delete them we can filter them now let's work on updating them okay now I'm not gonna do update we're like we can update the title if you guys want to move on and try that you can do that but I'm gonna update by just double-clicking and making it so it it makes it either complete it or incomplete alright so let's go to our - dues yeah let's go to our - dues component here close that a filter to do is that's all set so in our - dues component I'm gonna have like a little legend that shows if it's green it's it's incomplete if it's blue it's in so up in the template here I'm gonna paste this in because it's just it's just HTML there's no I don't want to type it all out so just a div with the class of legend we have a span here a span two spans here this incomplete box will be just the color this will be the other color so it's just a legend and then I'm just gonna put the CSS in so give me one second so we have where is it okay so I'm going to just grab that I just don't want to type out CSS because that's not what this coil what this is about so we have legends just going to display flex the complete blocks the incomplete I'm also going to add a media query to make this the two dudes responsive because right now there are three across but if we have a min width of 500 pixels I'm just gonna set it to be stacked okay and if you're interested in learning about the grid and stuff like that I just released a course on udemy called modern modern HTML and CSS from the beginning had to throw that in there so we'll save that and now if we go back we have our little key here and it's also responsive so if we shrink that up when it gets to 500 it stacks up okay so now back to view let's um let's create just trying to think of how I want to do this let's create a new action in our module all right now this action I'm gonna call update to do so let's go under filter which ends right here and let's say update to do actually on a sink okay so update to do and this of course takes in an object and we want commit and it's also going to take in and updated to do okay so whatever whatever we want to update now this action can be used for any kind of update we just want to we're just going to update the the completed value but again like I said as I said if you want to make it so you can update the text you can do that as well so in this update let's let's just copy this right here because we're just making a request putting it into a response except we're making a put request when you update something you want to use put so we're going to use this URL we don't need a limit so we want to do - duze slash and then whatever the ID now this update to do object that's passed in UPD to do has an ID on it so we're going to use that and then after we get that response we're gonna go ahead and commit update to do and let's pass in our update to do like that alright now down here I don't really like calling the mutation the same as the action but I guess it's fine so down here let's say update to do okay so this is going to take in state and it's going to take in the new to do so updated to do and let's see I'm gonna actually open up some curly brackets cuz there's a couple things I need to do here I we needed to be in the same place right when we update it we don't want it to be pushed on to the end or something like that we want it to stay in the same place which means we need the index of it so let's do Const index and we're going to get the index of the current to do by using state dot two dues so grabbing the two dues in the state and we're going to call find index and for each one we'll call it to do and we're gonna say where the to do dots ID is equal to the updated to do dot ID that'll give us the index okay we just want to check real quick to make sure the index exists so we want to say if index is not equal to negative one then now now we want to do is splice it out and replace it so we're going to say state dot two dues dot splice and there's different methods you could use to do this I'm just choosing to use splice so we want to pass in index one and then the actual updated to do all right so that should do it now we want to go back to our component and we want to bring in let's see we want to bring in the action of update to do or map it and we want this to happen when we double click the entire to do so let's see we don't want to put this we have our class of two dues and then we have each one so we want to put it on this same the same one that we have the loop the V for on so I'll do at dbl click equals and once we call that let's call a method called on dbl click OK and we want to pass in to do all right and then we'll go down here and let's create our on double click method so right here I'll put a comma will say on a double-click which takes in the current to do and I'm going to create a variable called update to do and set it to some new values well actually the only value I want change is that completed right that's all we're updating so I'm gonna say update I mean I'm sorry ID is gonna be equal to to do dot ID so the same ID title same title but this is where you could change it if you want but we're gonna have the same title however completed I'm gonna set that to the opposite of to do dot completed so if it's true it'll turn to false if it's false it'll turn to true and then finally after we create that object we simply want to call this dot update which we had intellisense for this update to do and we'll pass in that new object all right so when I call this sought update to do its calling the action that we brought in from our module and I think that should do it so let's save actually one other thing I forgot is we need to bind a class if if it's false we want it to be a different color and what I'm saying is the complete if this is false we want it to be a different color than if this is true so let's go back up to the to do this div here this has a lot of stuff on it I can put these on separate lines but I think prettier we'll put it back okay so you can see we have a bunch of attributes here we want to add one more which is going to be let's go right out under the class here and let's do V - bind class and we want to set this to we're going to say if is - complete well that's the class name we want to assign this class name if to do dot complete it is true so that's what this will do it'll add this class if this value is true so let's create this is complete CSS class so down here let me just grab it real quick I forget what it is sure where is it oh it's just a background color okay so it's just the blue background or the grayish blue background and a white text all right so let's save that and let's go back here and make sure we have no errors or anything let's double click unknown mutation type UPD to do okay so let's see we have an issue here oh I commit this should be update to do and actually when I made this put request I didn't even pass in the the new object so we have to pass that and as a second parameter update to do and then down here instead of this we need to pass in our response dot data which will be the updated object all right so let's try that and let's just console.log response data just to verify that it's actually updating on the server so double click okay so you can see over here completed it's true if I double click again completed as false good so it's it's making the update on the server with the requests we get the response back and then we're updating the state which is in turn changing the class all right so that's going to be it guys if you like this please leave a like I also want to mention I do have a patreon I don't like mentioning it too much about every once in a while if you guys want to support me even for a dollar per month which is you know the price of a pizza per year for this content I really appreciate it it takes me a while even to just put together a project like this to put on the on the internet for free so that really helps me out and it's really appreciated so that's it guys thanks a lot and I'll see you in the next video

Channel: Traversy Media

Views: 304,208

Rating: 4.9638062 out of 5

Keywords: vuex, vue vuex, state management, vuex state, vuejs, vue

Id: 5lVQgZzLMHc

Length: 61min 19sec (3679 seconds)

Published: Sat Mar 16 2019