Mixin Basics Overview 0:00Mixins are something we haven't yet reviewed, so let's take a look at that. And a good way to think of a mixin is almost exactly like a trait in PHP. You define your logic as a single object, and then for any Vue instance, you can mix it in, exactly like a trait. So maybe you have something like this, maybe fetch is the authenticated user, maybe multiple traits should be able to quickly do that on their own. Well, let's switch over to using ES6, and then we'll say within a methods object, yeah, we'll have like fetch user, something like that, and let's alert fetch the user. Okay, so now we have our mixin, or basically our trait. So that means if you have a Vue instance, let's bind this to the body, we can import any of that functionality by saying mixins, and then provide an array here, fetches user. And that's it. So let me show you.let's bind this to the body, we can import any of that functionality by saying mixins, and then provide an array here, fetches user. And that's it. So let me show you. When we are ready to go, this.fetchUser, and that should display an alert. Okay, let's go ahead and import Vue. And there you go, it works. So mixins are very simple. You don't want to reach for them all the time. But yeah, you might find some situations where it perfectly fits into your project, which is cool. For example, here's a good use case. If I switch over to the charting a new series, this is where we learn how to use chart.js with Vue.js. Kind of cool. Now in this series, we use a form of inheritance with Vue to inherit some functionality. But if you wanted, you could also move that into a mixin. And that way, if you have a revenue graph, or a profits graph, or a signups graph, well, if you don't want to Reusable Graph Rendering Example 1:30functionality. But if you wanted, you could also move that into a mixin. And that way, if you have a revenue graph, or a profits graph, or a signups graph, well, if you don't want to use inheritance, but you still want to share some functionality, such as like a render method, a mixin would do really well for that. So for example, we could have a renders graph mixin, and then we'll have a render. And yeah, then here might be where you new up your chart and yada, yada, right? I'll just once again say, render the chart. Well, now if you have your revenue graph, yeah, just mixin that functionality. And now we can render it. Cool. Let's do another one. This one will be for our signups graph. And let's comment that out so it doesn't keep alerting. Anyways, this will be our signups graph or something like that. And this will include the same trait or mixin once again. So now we should get two. And really, there's not that much more Method Conflicts and Overrides 2:18alerting. Anyways, this will be our signups graph or something like that. And this will include the same trait or mixin once again. So now we should get two. And really, there's not that much more to it than that. There are a few things you should know. For example, what if a mixin defines a method that also exists on your component? Well, two different things could happen. Now, in this case, we have render. But if we have, I'm sorry, let me, let's switch over to console.log. Anyways, if we define that exact same method, this will take precedence. And that's kind of cool. So if you want to pull in some functionality, but you do need to override a single method, just define it here. And we'll say defined from the main component. Okay, so now if we run it and give that a refresh, there you go. You can see that our component version takes precedence. But that's not the case for things like hooks. So for example, if I say created and console.log revenue graph has Hook Merging Behavior 3:12a refresh, there you go. You can see that our component version takes precedence. But that's not the case for things like hooks. So for example, if I say created and console.log revenue graph has been created, ignore most of those errors there. Anyways, there we can see it defined. Revenue graph has been created. But now if your mixin defines the exact same thing, it's actually going to merge them. So in this particular case with a hook, this does not take precedence. Instead, we execute both of them. So we will say the trait or mixin created method was called. And if we run it now, you'll see that we get two different references. So the mixin runs first, and then finally, your component has a chance to process. Okay, so how would you exactly define these in your project? Let me give you a quick example. Let's create a file like resources assets.js, our entry point, and we'll say import view from view, and then build up our new view instance. Organizing Mixins in Project 4:06your project? Let me give you a quick example. Let's create a file like resources assets.js, our entry point, and we'll say import view from view, and then build up our new view instance. Okay, so here, if you want global mixins, you could define it on your root view instance. Or of course, you can include these anywhere you want. So let's imagine this is just a random page specific instance. Okay, so we will import this mixin called renders graph. And we will import that. Import renders graph from, and maybe we can store these within a mixins folder. Okay, like so. Okay, let's create that file, mixins slash renders graph. Okay, so here is where we can export that object. And yeah, it can just be anything that we defined here. So in fact, let's just grab that, paste it in, and now we can export. Okay, so take a look. Within our JavaScript folder, we have a new directory for mixins, in this case, Compiling and Testing Demo 4:55So in fact, let's just grab that, paste it in, and now we can export. Okay, so take a look. Within our JavaScript folder, we have a new directory for mixins, in this case, one for rendering a graph. And then from any view instance you want, you can import that, and then include it like so. Now that means this instance can call a render method. And also when the component has created, or finished being created, it will log to the console. So let's try it out. We will mix.browserify main.js, and then compile that down. And then to our welcome view, that default view for Laravel. And down here at the bottom, I will import the compiled file, js main.js. And why don't we do this? Let's get rid of all of this. Then from the main.js, we will bind this to the body, like I do for my demos. And then here, we'll have our obligatory button that says, when you click on it, we will call the method.Then from the main.js, we will bind this to the body, like I do for my demos. And then here, we'll have our obligatory button that says, when you click on it, we will call the method. And how about this one on our mixin, render. Kind of silly example, but you get the idea. Click to do amazingness render glory. All right, so does that look good? Let's compile it down one more time and view this in the browser. Okay, so I switch to the browser, open up Chrome DevTools. Sure enough, that created hook was called. And if I click on the button, we call that method. Okay, stupid, silly example, but hopefully you get the idea. Don't reach for them immediately, because it does add a bit of misdirection. But yeah, when you need some reusable functionality, this is a cool, clean way to go about it.when you need some reusable functionality, this is a cool, clean way to go about it.
