Alright, in this lecture, we will look into something called as mixers. So mixers are very useful when in terms of uJs. So they help us to avoid a lot of repeated code, it makes it a lot more easier. So let's look into how to create a mixin. And what it is. So I changed things up internal order folder, I put the root component to home, and inside the home, let's change it to required type false.

So we don't get any real errors in the console. For example, let's say let's have a h1. And we have it let's have a computed property as well. It says get date and inside this key date property, let's return string off new date. So we have created a new date object. And let's add it here.

I save it, I'm getting the date. So what if I want only the substring of it? Let's say I wanted from zero to 11 or 15 Let's say 15. So if I save 15, we get Friday, March 22 2019. Right? So what if I have another component?

Let's say I have a component such as header. Let's import the header component. Let's register it. Let's use it inside headers slash. Save it. We have a few details.

Here we have Hello analysts tag this. Let's remove that here. We also have something called as data and it's also removed that and if I take everything up, I save it. It's blank, right? So what if we are using another component and we also want the date to be visible here, right. So what we'll do is so we'll have to create another computed property and we are allowed to save good date again and we are returned string data object.

And then again substring, zero to 15. All right, so this is repetition of code. So we are using the same get dead method in multiple places in home as well as in header, right. So what we can do is instead of like rewriting this computed property in each and every component, we can create a mixin. So in the source, let's create a new folder. Make sense?

And inside mixin. So we have our date mixing dot j s, right, so inside this file, what we'll do is we'll say export. So now once you say export default, we can use the same syntax what we use inside the script tag, so we can copy the computed properties from here, and we can paste it here and it would work the same. So now what we can do is instead at home, we can remove the computed property. Instead, we can import the mixin. So now that we have imported the date, mixed, Then we want to use it.

And to use it, what we'll do is we'll create, we have a property called as make sense. And again assigned date Nixon. And if I save it, and if I go back, it's not working. So today's date is from the home component, and it's not working. The reason why it's not working is it saying get date is not defined, right. So the reason is mixings usually accept or a property.

So for that, I had to create an array and have to include date mixin. And if I save it, it's working fine. So let's do the same thing with header as well. So we'll remove the computed property, and we'll import the mixin and you can say mixin create an array inside of the date mixin. And if I save it, both will be working fine. So inside the mixing, you can have the data property as well.

If I save it, and if I go back to header, and if I save if I save it, and go back, a local mixin appears. Alright, so now you might be wondering what did If that is the case where the computed property, like a good date is also available in the header property, for example, I have a computed property. And it's also named get date. And instead, it returns a small string that says, Get date, right. So what happens is when the property inside a component is named similar to the property inside a mixin. Generally, the property inside the component is given higher priority.

So if I save it, I'm going to get get date for the header. Even though we are importing the mixin that has the get date computed property that returns a string. All right, so that should make sense. I'll see you in the next one.