Vue中混入（mixin）的应用

   随着深入vue的学习和使用，在文档中使用mixin来减少代码的复用可是非常省心的呢。混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（vue生命周期，methods，computed，watch）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项，实现了一处代码多出复用的功能。
	下面来看看基本使用方法吧~

1. 首先在src/common/js/mixin.js中定义一个分页器mixin，具有页码，每页数据条数，总数属性。除了data之外还可以定义props，8个声明周期钩子，methods对象，computed，watch对象。

export const pageNationMixin = {
	data() {
		return {
			page: 1,
			limit: 10,
			total: 100
		}
	},
	created() {
		this.getTableData()
	},
	methods: {
		getTableData() {
			console.log(this.page)
			// 异步获取表格数据代码
		}
	}
}

使用方法是在table.vue中引入并声明，这样table.vue就有了pageNationMixin 中的data、created、methods。

import pageNationMixin from '@/common/js/mixin'
export default {
	mixins: [pageNationMixin]
}

2. 当mixin中定义的数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

var mixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

export default {
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" } // mixin中message被组件中的message覆盖。其余数据合并。
  }
}

3. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。例如当同时有created钩子函数，组件中使用时先执行mixin中created再执行组件中mixin。
4. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

那么mixin常用的场景有哪些呢？

1. 常见的分页器。
   在src/common/js/mixin.js中定义分页器mixin: pageNationMixin 如下，这样在多个拥有分页器的应用组件中就可以复用这段代码。

export const pageNationMixin = {
	data() {
		return {
			page: 1,
			limit: 10,
			total: 0
		}
	},
	created() {
		this.getTableData(1, 10)
	},
	methods: {
		getTableData(current, size) {
			const params = {
				page: current,
				limit: size
			}
			axios.get(url, { params }).then((res) => {
				this.total = res.data.total
			})
		},
		onShowSizeChange(current, size) {
			this.page = current
			this.limit = size
			this.getTableData(current, size)
		},
	}
}

在应用组件中只需要将其引入即可。当页码或每页数据改变时就会调用mixin中函数。从而省略了大段代码。

<template>
  <div>
    <a-pagination
      showSizeChanger 
      @showSizeChange="onShowSizeChange"  // 每页数据改变
      @change="onShowSizeChange" // 当前页改变
      :total="total"
    />
  </div>
</template>
<script>
import pageNationMixin from '@/common/js/mixin' // 需要将pageNationMixin 引入
  export default {
  	 mixins: [pageNationMixin]
  };
</script>

2. 大于两个组件拥有相同的方法或数据时。
   当有两个以上的组件会公用到相似功能的方法时，就可以考虑将这段代码抽象出来复用了。例如上个例子中的onShowSizeChange方法。

关于混入（mixin）的应用暂时总结到这里。如果后面遇到更好的应用场景再继续添加上去~

https://github.com/Gesj-yean/vue-demo-collection 记录了更多优秀插件的使用方法。有时间的同学请看我的置顶博客，可太感谢啦。