Intro to Vue subclassing 0:00Let's talk about Vue subclassing in this episode to help with reusability. And once again, I'm going to use this form example from the Let's Build a Forum in Laravel series, since it gives us a useful real-life example. Alright, so if I open up Chrome DevTools, what you can see here is we have a replies component that is made up of any number of child replies. And I think this is a pretty common pattern that you'll find yourself doing. You're going to have a single representation of something, like a reply, but then you're going to house those within a dedicated collection component. And that way, the collection component can be responsible for listening when you add a new reply, and then it re-renders. Understanding replies as collection 0:36And that way, the collection component can be responsible for listening when you add a new reply, and then it re-renders. It can be responsible for removing an item from the collection. And notice that I am using that word collection. So let's figure out how we might deal with this. So here's that replies component right now. So think of that as representing the wrapper around each individual reply. And if we take a look at this, you can see it does that very thing. For all of the items in its collection, render a reply. Now we can see some helpers here.For all of the items in its collection, render a reply. Now we can see some helpers here. Like when a reply omits an event that says it has been deleted, then we're going to call this remove method. So a standard method on a collection. Remove the item from the collection. And then further, on our new reply form, and that would represent this right here. So when that posts to the server, and it fires a created event, once again, we're going to call an add method to add to the collection. So once again, I keep using this term collection, but it's not represented anywhere here whatsoever. Creating a Collection subclass 1:29once again, we're going to call an add method to add to the collection. So once again, I keep using this term collection, but it's not represented anywhere here whatsoever. So let's tackle that. I'm going to go into my JS folder, and we'll add it as a top level here. Collection.js. And we're going to export default view.extend. So think of this as basic inheritance. We're extending the default view constructor, and we're going to add some other things out of the box. For example, a collection consists of items.and we're going to add some other things out of the box. For example, a collection consists of items. So we know, yeah, on some level, we need to have an items array there. Next, there's going to be basic methods to add and remove from the collection, among other things, of course. So remove at the index, and we can just switch back to replies.view and snatch that. Something like this. And we can remove the flash. That's a little specific. Okay, next we need one for add.That's a little specific. Okay, next we need one for add. So how do you add an item to the collection? Just like this. So we're making it as generic as possible. Finally, we need to accept a prop, probably, for the data for the collection. So this is what you're going to pass through when you create your collection. You could say data equals whatever eloquent collection you want to pass to it. And then we will store that. Okay, so I think that looks pretty good to me. Extending Collection in component 2:51And then we will store that. Okay, so I think that looks pretty good to me. We have extended view with our new collection type. And as part of that, it has some data, it has a method to add to the collection, and then a method to remove from the collection. So now, if we want to make use of this, let's go back to our components slash replies section, and we need a collection. So we'll say import collection from collection. And now, if I want to extend collection,So we'll say import collection from collection. And now, if I want to extend collection, I can just say collection.extend. And now by doing it in this way, I immediately inherit all of the functionality here. So now, think about it. This section can be deleted entirely. Further, the data, I don't need to do that. Now this will intelligently be merged, so meaning the data object I pass here should probably be merged with what you have here.Now this will intelligently be merged, so meaning the data object I pass here should probably be merged with what you have here. But yeah, does that make sense? So we import collection, and we now extend collection just like basic inheritance in any language. So now let's give it a shot. We add an item, and it should still work exactly the way it did before. But yeah, now we've extracted some functionality. So once again, if you find that you have this concept of collections in your view components, Recap and reuse benefits 4:02But yeah, now we've extracted some functionality. So once again, if you find that you have this concept of collections in your view components, well now, you can extract all of that essentially to like an abstract parent class. So in closing, here's the changes we've made. Replies.view. We now imported the collection, and we extended it. That way, we could get rid of all of the boilerplate that would be true for every sort of collection component you create, like setting the items and like setting out basic methods to add and remove from it. And then finally, we extract all of that out to its dedicated view subclasslike setting the items and like setting out basic methods to add and remove from it. And then finally, we extract all of that out to its dedicated view subclass that we can reuse anywhere.
