Vue mixed (a mixin) applications

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

1. First defined in src / common / js / mixin.js a mixin in a pager, having a page number, page number data item, the total number of properties. In addition to the data may also define props, 8 cycles declaration hooks, methods objects, computed, watch the object.

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

Usage is introduced and declared in table.vue, so table.vue there pageNationMixin the data, created, methods.

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

2. When the data objects defined in the mixin recursive combined internally, and in case of conflict in priority component data .

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. Hook function of the same name will be merged into an array, and therefore will be called . In addition, the mixed object hook will be called before the component itself hook . For example, when there is simultaneously created hook function, performed first component using a mixin mixin created then perform assembly.
4. Target value options such methods, components and directives, will be merged into a single object. When two objects keys conflict, take the key component object to .

So mixin frequently used scene, what does?

1. Common pager.
   In src / common / js / mixin.js defined pager mixin: pageNationMixin below, so that the component has a plurality of finisher applications can reuse the code.

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)
		},
	}
}

In the application components and need to be introduced to. When the page number or page data change is called a mixin function. Thereby omitting one big chunk.

<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. Than two components have the same data or a method.
   When more than two components will be functionally similar to the common method, it can be considered abstract code multiplexed. E.g. onShowSizeChange methods of example.

Application on mixed (mixin) concluded here temporarily. If you later find a better scenario then continue to add up ~

https://github.com/Gesj-yean/vue-demo-collection documented use more outstanding plug-ins. Students have time to look at my top blog can thank you very much.