Mixins（混入），一种分发 Vue 组件中可复用功能的非常灵活的方式；
实际由一个mixins.js文件，导出一个js对象，包含组件中的变量、方法、生命周期函数（如：data、components、methods、beforecreated、props等等），是一个公共的对象，各个组件可以通过引入它复用里面的功能。
什么时候使用Mixins？
当我们多个组件中数据、功能、界面很接近的时候，我们可以利用mixins将公共部分提取出来，通过mixins去封装成一个公共对象，提供给各个组件使用，跟"公共组件"相似。
怎么使用Mixins？
在src目录下（或项目中存储公共js文件目录下）创建一个mixins文件，在文件夹下创建一个mixins.js文件，内容如下
js
// mixins.js文件内声明mixin对象
export const mixin = {
components:{},
data(){
return {}
},
methods:{},
beforeCreated(){}
}
js
// 在组件中引入使用 组件直接可以访问到其变量方法
import { comMixin } from '@/mixins/mixins.js'
export default {
mixins: [comMixin],
data() {
return {}
},
created() {},
}使用Mixins需要注意什么？
1、Mixins的设计模式类似简单的工厂模式，其变量、方法都是独立在当前组件的，不同组件间互不影响；
2、对象合并，当mixins与当前组件有变量、方法命名一致时，组件的变量、方法会优先，覆盖mixins中的变量、方法。
3、生命周期函数，mixins内的会优先执行，组件的后执行。
4、异步请求函数返回值，无法直接获取返回值，需要直接返回异步函数，.then()获取。
Mixins、Vuex、公共组件的差别
| Mixins | Vuex | 公共组件 | |
|---|---|---|---|
| 官方介绍 | 一种分发Vue组件中可复用功能的一种灵活方式 | 全局状态管理库 | 可重用的UI元素 |
| 设计模式 | 简单 工厂模式 | 单例工厂模式 | 简单 工厂模式 |
| 功能 | 共用变量、方法 | 实现跨组件的通讯，实现数据共享； | 共用HTML、变量、方法 |
| 本质 | js对象 | store对象 | html |
| 独立性 | 变量、方法混入当前组件 | 独立 | 父子组件相对独立 |
| 不同 | 可以复用当前组件的变量、方法（data、methods、生命周期函数） | 纯粹全局管理数据 | 复用共有组件的UI元素、变量、方法 |