Let's Understand, What is Mixins in Vue JS?
Mixins in Vue JS are basically a piece of defined logic, stored in a particular prescribed or fixed way by Vue, which can be reused again and again to add functionality to our components. So We can say that mixins are shared between multiple Vue components without the need to repeat code.
Or We can say that Mixins are basically to be used with components. They share a reusable code between the components. When a component uses mixin, all options of mixin become a part of the component options
Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.
Why are Mixins important
- Using mixins, we achieve the DRY principle in programming which simply ensures that you do not repeat yourself.
- Mixins are also safe, they do not affect changes outside their defined scope if they are well written.
- Code reusability.
Let’s try to understand Mixins with the help of an example .
If you have two components that contain a method that does the same thing or performs the exact functionality in the two components like the below example :
// Component 1 (abc.vue)
// abc.vue
<template>
<div>
<button v-on:click="clicked('Hello from abc component')">
Button 1
</button>
</div>
</template>;
export default {
name: "abc",
methods: {
clicked(value) {
alert(value);
}
}
};
My component name is abc.vue and in it we have one method name as click it. when I called it showed the alert message.
// Component 2 (xyz.vue)
// xyz.vue
<template>
<div>
<button v-on:click="clicked('Hello from xyz component')">
Button 2
</button>
</div>
</template>;
export default {
name: "xyz",
methods: {
clicked(value) {
alert(value);
}
}
};
Now in App.vue file we can import both components and declared like below:
<template>
<div id="app">
<abc/>
<xyz/>
</div>
</template>;
<script>
import abc from "./components/abc.vue";
import xyz from "./components/xyz.vue";
export default {
name: "app",
components: {
abc,
xyz
}
};
</script>
So we can see that we are repeating the click method code in both components and this is not an efficient way to handle memory resources and it does not follow the DRY principle.
So now mixins have come into the pictures, Now we solve our problem by using mixins. With mixins, you can encapsulate a piece of code or functionality and then import it for use as often as you want in various components.
Creating the mixin file
A mixin file is an exportable javascript file in which the block of code or functionality to be imported and re-used in your various desired Vue components is defined
// src/mixins/clickMixin.js
export default {
methods: {
clicked(value) {
alert(value);
}
}
};
This is the mixin file, inside is a simple click method that pops up an alert modal.
Importing the mixin file into components
Now that a mixin has been created, the next step is to inject it inside the components where it is needed
<template>
<div>
<button v-on:click="clicked('you just clicked on button 1')">
Button 1
</button>
</div>
</template>;
<script>
import clickMixin from "../Mixins/clickMixin";
export default {
name: "Test",
mixins: [clickMixin]
};
</script>
Types of Mixins
There are two types of mixins in Vue:
- Local Mixins: This is the type we have used throughout this post.
- Global Mixins: This is a different type of mixin that is defined in the Main.js file of any Vue project. It affects all Vue components in an application.
// main.js
file Vue.mixin({ mounted()
{
console.log("hello world!");
} });
Thanks for reading