Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the axios.delete method then filtering out the deleted todo once the response comes back.
[00:00] Notice that each todo also has a todo.id, which means that I can use this id 1, 2, 3, or if I had another one, you'll see 4. I can use that id to look it up when I request to delete one of these from the API.
[00:16] I'm going to put this in a <span> so I can add some buttons behind it, and that way in my class I can say flex, and then in this I can say flex:auto to basically take up the remaining space and push my buttons to the right.
[00:32] Then in my button I want to put an image, and the source can be, there's a great little service at icon.now.sh, if I look this up, icon.now.sh, I can find the icon I want, we'll just find a trashcan one.
[00:48] I'll search for trash, and this will be fine. I'll copy this, paste that there, now I have a nice little trash can where I can delete this. I'll also align this down since that expanded the height of the button. We'll do items-center which adjusted the align item-center.
[01:05] Now, when I click on this trashcan, I want to say click and we'll say remove. This remove is what we want to map to an action, remove, which will then map to interactions and asyncRemove, which will have a very similar signature here where this takes the commit and the task, actually this one's going to be the todo since I want to get the todo.id off it.
[01:33] Then I'm going to axios.delete, then this string I want to turn it into a template string, so I can target the todo.id and send a delete request directly to that todo.id. I don't need to pass anything else, I'll just go ahead and delete that.
[01:49] Then after that's done, I can pass on that todo to a committed mutation, where I say remove. Can go ahead and duplicate this down, say remove, and now state todos is going to be a filtered version of state todos, where if the todo.id is not equal to the todo.id that was deleted, that means we want it.
[02:17] We're basically getting everything but that todo.id that we deleted. Back here, just need to make sure we're passing in our todo to that remove, which I'll pass in todo right here. That's coming from the todo of todos, so the workflow here is todo goes into the remove, this remove is in mapActions, so it's here, which is then mapped to in my actions.
[02:43] This remove sends off a delete request. Once that comes back, we can just commitRemove the original todo since this doesn't really return anything, it's just deleting something. Then on the front end we can remove-commit this mutation by filtering out that todo. I'll go ahead and save and try this out.
[03:02] I'll click this some task, and now it's gone. I can click sleep, because no one needs to do that, and now we only have eat and code left. I'll add sleep back, hit enter, you can see we have sleep at number four. I'm just going to add a tiny bit of formatting here. We'll do todo.id. with a space so you can see those numbers a bit better.
[03:25] Then in this form I'm going to give the same class as the article, and maybe even give it an input submit button with a value of add, just so you can click on that if you didn't know that enter was available to hit to submit something.