vue 混入

這節來說說vue的混入(mixin)。

混入是干嘛用的呢？官方是這么說的：混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。

混入其實就是實現了單一繼承和多重繼承。

我們需要在混入里放什么東西呢？我的理解是：混入里可以放一個類或多個類，也可以只放方法和功能。根據面向對象單一職責原則和開閉原則，排除掉放多個類，若是只放方法和功能，那么我覺得混入就沒有意義了。最后我的總結是：混入里最好放一個類或者是多個類組合或聚合成的一個類。

知道混合是做什么用的之后，就可以開始做自己的小demo了。

首先模擬一個業務場景，有多個列表數據，每個列表都有增刪改查的功能。每一次的增刪改查需要觸發列表查詢方法重新渲染，而每次重新渲染都需要加入loading。此時我們可以將loading划分成一個類，而他的功能是顯示與不顯示。

在項目里新建一個js文件，取名為loadingMixin.js：

export default {
    data() {
        return {
            showLoading: false,
        }
    },
    methods: {
        showLoadingFun() {
            this.showLoading = true
        },
        hideLoadingFun() {
            this.showLoading = false
        }
    }
};

混入文件已經完成，接下來就是在組件中混入此類：

<script>
import loading from "@/loadingMixin"
export default {
    mixins: [loading]
    data() {
        list: [],
        form: {}
    },
    mounted() {
        this.showLoadingFun() //調用混入顯示loading的方法
        this.getList(this.form)
        .then(() => {
            this.hideLoadingFun() //調用混入隱藏loading的方法
        })
    },
    methods: {
        getList(form) {
            //此方法用來整理查詢條件，並調用查詢方法
        }
    }
}
</script>

先將混入的類引到組件里，然后用vue mixins的屬性獲取混入的類。多個組件使用的方法類似，由此實現復用的作用。

混入里可以寫vue的任何屬性和方法：data,computed,methods,created,mounted等,而且當混入個組件都有同一屬性時，會先執行混入類里的屬性和方法，所以上面的demo可以在混入里寫mounted：

export default {
    data() {
        showLoading: false
    },
    mounted() {
        this.showLoading = true
    },
    methods: {
        hideLoadingFun() {
            this.showLoading = false
        }
    }
};

雖然混入可以直接這樣寫，但是我不建議這種寫法，因為這樣很可能就不能夠復用了。

以上的理解是我學習混入並運用之后分析得出的，初步學習可能不是很深刻，未來會加以補充的！