Vuex 4 for Efficient State Management

3.3 Don't Track Everything and Make Your Actions Chainable

In this lesson, we are going to add the ability to navigate to a separate page, so that we can view the detail of an item. Now, I know that there's not a lot of detail about an item, but this will give us the opportunity to add more functionality, such as deleting an item. And we can see how we can incorporate Vuex throughout this whole process, so let's just dive in and begin by adding a link. Now, we're going to do this for our item text, and we are going to use the view router for our navigation because that's what we should do. And we are going to reuse the about view, because it was already given to us and we might as well use it. So we are going to navigate to about, and then the id is going to be the second segment there. So we will need to modify our router. But first, this is going to make our UI a little ugly. That's very difficult to see. So let's add some styling to our link here. And in fact, we can just reuse the text classes that we applied to our card. So let's just copy that, we will add that to our router link. And we don't need the background values, so we will just leave the text values and that's a whole lot better. So let's go to our router file, and there's just a few changes that we need to make. For one, we need to specify that we are going to have an id as the second segment to this path. And we will also go ahead and add props here, because we want to be able to get the id. And of course, we can get the id using the view router. But why I do that, when we can just go ahead and make it a prop here. So we will have a prop called itemid, and that is simply going to be from our route, we'll get the id from params there. Now, do note that this is going to be a string value, because this is coming from the URL. So really what we want to do is parse this as an integer, so that we can use it as a numeric value. So there we go, that is going to be our route. So that's inside of our about view. Let's go ahead and open that up, let's add our scripts. I'm going to once again, use the composition API so that we can get our props as an argument to our setup method. Let's also go ahead and pull in the import statements for computed and useStore, because we will need access to those as well. And then we need our store, so let's go ahead and call useStore. Now, we have some options here as far as displaying the item that we want to display. We could come in here and we could say that, okay, we'll take our store we will commit something like selected item id, kind of like what we did with the lists. And then we could pass in the item id from our props, although we do need to specify that we have that prop, don't we? So, let's quickly do that [LAUGH] or nothing is going to work there. Okay, so we could do that, however, if we are going to set the currently selected item, then that pretty much means that we can't view multiple items at the same time by just opening them up in their own tabs. And I don't know about you, but I have a lot of tabs open usually. So we can't really track which item we currently are looking at, otherwise, we would run into some Issues whenever we try to delete or update an item. So about vues are going to have to be pretty much self-contained. We aren't going to be setting any state, but we'll definitely need to access our state, so that we get the item that we need to display. And we already know how to get the information that we need to get the item. We have it's id, but we do need the listIndex and the itemIndex, and we know how to do that. We wrote a getter specifically for that purpose, it's called getListitemIndexes. Then we supply the item id from our props, and that will give us our information, so that then we can just retrieve our item. Once again, we have to get into our store access the state, but then for our lists, we will provide the List index and then for our items, the item index that will give us our items, so that then we can make it available to our template. Now, this needs to be a computed value, so that it is reactive. So we will just simply wrap our item with the call to computed, and there we go. So inside of our template for this h1, let's make this our text for the item. So if we go to the browser and view each one of these pages, we should see the text Strat, Tele and Les Paul, and Vela. So that part is good to go. Now, we need to add the button for deleting an item. So let's go ahead and do that. Let's use the button danger class, because we are deleting something, we want this to be somewhat of a warning. And as far as the method is concerned, let's just call it delete item. Because really, we have all the information that we need inside of our setup method here, so we don't really need to pass anything. So we'll just have delete item, and then inside this method the we, of course, want to dispatch inaction which I guess, we could just call delete item as well and then we could just pass in item it. Now, we could probably pass in the listIndex and the itemIndex, because we are going to have to do the same thing inside of this action. However, I want to make it so that we retrieve that information fresh every time that we need it because this could be stale, there could be some side effects thanks to reactivity and all of that stuff. Especially after we remove an item, then the indexes are gonna be different, and there could be some issues. So I would prefer to err on the side of caution, and just retrieve the information that we need right whenever we need it. So in this case, we will have that delete item action. We of course will need to commit some changes, and we will have our item id. Now, ery first thing that we need to do is make our http request. So we will make a delete request, and the endpoint will be items slash and then the item id. But after that, then we of course want to update our state. And this is where we essentially want to call that getter function once again. So let's just copy the code that we have that's going to use that, we do need to change the value that we are passing, because this is just item id here. And then we will want to provide this information to a mutation, so we will commit a mutation called delete item, or I guess really in this case, it's more of a remove item. And then we will simply supply the indexes that we need. We don't need the id here, we just need to provide the indexes. Now, we do need access to our getters here, so we will add that to our destructuring of our context, and then we just need to write this mutation. So after load lists, we will have remove item where we have our state. And let's go ahead and destructure this, so that we have our listIndex and itemIndex. And then the code here is going to be very simple. We want to access our state, the list with the provided index, and then items. But here we want to just splice with the item index, and we want to remove just that one item there. So that should remove it from our state. So let's first of all make sure everything is saved, and then we will test this out. So let's go to our Fender Strat. So if we click on delete, well, it looks like nothing happened. Let's go to our main page. Let's go to the Guitar Wish List, and Fender Strat is still there. So we have an issue, let's take a look at the console. See here item id is not defined that is in the bundlers statement 217, and it looks like that is inside of about statement 26. Let's go to about about statement 26 store, dispatch, itemid. And yes, yes, that is props item id. So that shouldn't make that work that failed. And of course that failed, because this needs to have a property. Okay, now let's try this again. We click on delete, we can see that there is the delete item action followed by the remove item mutation, but nothing has happened. So let's go to our list, let's refresh the page here. And we can see that the Stratocaster is now gone which is good, but we want to change this behavior so that whenever we are done deleting an item, that it would take us back to our main page. So let's make a few changes here. One thing that I typically do for my actions, since they are typically asynchronous that means that we are working with a promise in some way. I simply return that promise, so that I can chain other actions to it however I need to, and actions is the wrong word there. So that I can chain other method calls, or other things that I need to do. And I do that pretty much in all of my actions, because it's very useful. Like in this particular case, we are sending a delete request to the server. When that is done, then we are updating state. But when that is done, we want to redirect back to our main page so that's inside of our about vue, we can then just call then once again. And we need access to our router, but then we would be able to go back to our homepage, by just pushing in the path of the view that we wanted to display. So let's pull in our router, so that we can use that. We have a similar function called useRouter. This is from the vue router package, and we need to call that function. So we'll call the variable router, we'll call useRouter and then that will allow us to navigate to another vue. So now whenever we go to another page, let's close all of our tabs. And let's go to the Gibson Les Paul. If we click on our delete button, that takes us back to our main page. We can see that the Gibson Les Paul is now gone, and we are good to go. And one other thing, since I went ahead and returned all of the promises on the int and update item actions. Whenever we call a int, we can go ahead and have it automatically select the first list, so that we don't have to do that. So that was inside of main and we dispatch in it, so that then we can select a list. So let's go ahead and do that, so that we will commit the select list. And then we just need to access one of our lists, and really the first list. So that is from our state lists with an index of (0), and that should work. So now, whenever we refresh the page, we can see that it is automatically selecting that first list. Now, I think that there are two takeaways from this lesson. First of all, don't feel like you have to store everything in your Vuex store, like for example, I had talked about how we could have stored a selected item id. But really, that wasn't going to be a good idea, because we would have the ability to display different items. And if we were just storing one item at a time, that would cause some issues. The second thing to take away is that our actions are typically asynchronous. So it's always a good idea to return the promise that you are working with inside of that action, because then that gives you the ability to chain other things to that action so that when the action is complete, then you can do something else. And I can't tell you how many times I've used that functionality.