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.
Let suppose i want to implement enable/hide loader methods in whole project, but i don't want to create methods for enable/hide loader in every vue instance.
Then Mixins is good idea over here. Please check below examples for more details:
mixins:
export const myMixin = {
data() {
return {
isLoading: false,
}
},
methods: {
enableLoader() {
this.isLoading = true;
},
hideLoader() {
this.isLoading = false;
}
}
};
Vue instance:
import { myMixin } from '../mixins';
new Vue({
mixins: [myMixin],
methods: {
method1() {
// Here you can use the methods from the Mixins, You can add more global methods to mixin and can use over different vue instance
this.enableLoader();
}
}
});