preface

Mixins are commonly used to extract common code parts of components and, when used well, to optimize the structure of business code, make lengthy pages much simpler

Refine the logic and data of the page

Even though our index.vue has extracted several sub-components, the page code and logic are still confused, and there are still a lot of data and logic that are not necessary to the main body in data and methods

Before optimization

    <template>
        <h1>{{title}}</h1> <! -- Page body content -->
        <Child :data="list"></Child> <! -- Referenced child component -->
        <ul @click="clickAction"> <! Split the business logic of the non-component -->
            <li v-for="item in items">{{item}}</li>
        </ul>
    </template>
Copy the code

    new Vue({
        data: function () {
            return {
                title: ' '.list: [].items: []}},methods : {
            getTitle : function(){}, // Get data and process data logic omitted...
            getList : function(){},
            getItems : function(){},
            clickAction : function(){}},created: function () {
            this.getTitle();
            this.getList();
            this.getItems(); }})Copy the code

There are generally three different types of code in templates: the page itself, referenced subcomponents, and those that are not subcomponents. The three data of data in the instance need to be separately obtained from the interface, and then they need to be processed before they can be displayed. The actual page, data and methods will have more than ten or even twenty data and methods, so the index.vue file will be stretched very long, obviously the component has been extracted. It’s still long.

Mixins can be used to separate some associated attributes and methods from the page to optimize the structure and avoid confusing attributes and methods. Mixin attributes and methods can be prefixed with special points, such as _list

The optimized

The template is basically unchanged, except for the variable name, okay

    <template>
        <h1>{{title}}</h1> <! -- Page body content -->
        <Child :data="_list"></Child> <! -- Referenced child component -->
        <ul @click="_clickAction"> <! Split the business logic of the non-component -->
            <li v-for="item in _items">{{item}}</li>
        </ul>
    </template>
Copy the code

The Child component, data and methods, is separated into child.mixin.js

    let mixin = {
        data : function(){
            return {
                _list: []}},methods: {
            _getList: function () {
                this._list = [1.2.3]; }}},export default mixin;
Copy the code

Unbreakable logical dependencies are extracted into items.mixin.js

    let mixin = {
        data : function(){
            return {
                _items: []}},methods: {
            _getItems: function () {
                this.items = [4.5.6];
            },
            _clickAction : function(){
                alert(1); }}}export default mixin;
Copy the code

Finally, the code for the body, referring to the mixin file above

    import childMixin from "./child.mixin"
    import itemsMixin from "./items.mixin"

    new Vue({
        mixins : [childMixin,itemsMixin]
        data: function () {
            return {
                title: ' '}},methods : {
            getTitle : function(){}},created: function () {
            this.getTitle();
            this._getList();
            this._getItems(); }})Copy the code

In this case, the template code is unchanged. In the following business JS code, if there are many references to mixins, the extracted code will be merged in, so that the data of the body can still be used without _list and _items. In created, functions mixed with mixins can also be directly called. Basically, they just need to call the entry file. Business implementation does not need to care about how to implement, which can simplify the code structure to a certain extent.

This is just a simple demo, the actual operation will be more complicated than this, pay attention to the rationality of variable command and extraction, in order to achieve the optimization result