VueX Edit and Delete + Admin Page (Building a VueJS app Part 6)

In this tutorial we’ll be adding a delete button, an edit page, and an admin page to our VueJS app. Along the way we’ll discover Vue Filters and learn more VueX patterns.

0:00 Start
0:45 Admin Page
12:05 Delete Button
19:32 Edit Page
26:21 Review

Vue Filters are a feature that lets us create purely functional code, then use it in our template tags to modify data. The big advantage over a method is that you know it won't have side effects -- and it's also slightly more visually appealing to stack multiple filters than to nest multiple methods calls.

The VueX patterns we'll be learning will using actions to edit individual records within the store and remove records -- and calling the appropriate mutations and Axios API calls to make that happen.

*** Notes ***

Hey everyone!

I decided to start adding more polish to the videos. It was fun for a while trying to get outlandish amounts of tutorial recorded in a day, and the rough vlog format helped me get off my ass and record again, but now I want to start filming to make them easier to consume.

Here’s what I’m starting.

1. Tightened up the introduction (first minute), and included a preview of the topics covered in each section
2. Sped up some of the “boring” bits that are review (such as making yet another new route)

I’m still going to be leaving in the “oops, there’s an error… let’s investigate” bits, because they help show common ways stuff could go wrong.

Let me know what you think of the changes, and other ways you think the videos could be improved.

*** Find me online! ***

Website coming soon.

#VueX #VueJS #Tutorial #Admin #Vue #VueFilters #2019

[BenoitKopp]

isn't that a bad practice to apply v-model directly on an object attribute trough a computed without a setter or a new input event emitted to the parent with the updated video object ? (EditPage)

[yavuz]

Why dont you use es6 splice to remove an item from the state?
I used to do something like this:

const idx = state.videos.indexOf(video));
state.videos.splice(idx, 1);

And for the edit mutation
const idx = => {
v.id === video.id;
}));
state.videos.splice(idx, 1, video);

This is assuming you pass the video reference in both mutations

[sritika]

Thank you for putting in the effort to make these videos and share with all!

[captainwalter]

How did you do that thing at 11:00 where you pasted it with the spans automatically?
Would love to see a workflow / tools video from you about VSC and anything else you consider high leverage.

[abhishekbhardwaj]

we can include break in the if statement of foreach loop for updating video in the state.

[thanhnguyvan]

So every time we want to make an api call to delete we have to delete in state and server?

[leordancarmona]

Why would it shows "TypeError: Cannot read property 'name' of null" when I tried refreshing the page while on the update page?

[javokhirbekkhaydarov]

bro i havent see Api() function when you are create this function

[lars-sorensen]

Thank you! Really digging your videos!

[alexeilevinzon]

Great video && Project Jeffrey!! Thank you a lot :)

[taylorbrazelton]

Get a fun little error when I do perform the steps mentioned for the update page portion of the video:
```
do not mutate vuex store state outside mutation handlers
```