vue中使用mixins

Mixins （混合或混入）

定义的是一个对象

概念

一种分发Vue组件可复用功能的非常灵活的方式。混入对象可以包含任意组件选项（组件选项：data、watch、computed、methods、created、mounted…）。当组件使用混入对象时，组件和混入对象的同名选项将以恰当的方式进行“合并”。

用法

1）定义一个混入对象mixin（创建一个mixin.js文件）

2)把混入对象mixin混入当前组件中

合并规则

1）data：数据在内部会进行递归合并，并在发生冲突时以组件数据优先（组件和混入对象的数据同一个参数名初始值不同，取组件的值）
2）created、mounted等：同名钩子函数将合并为一个数组，都将被调用且混入对象的钩子将在组件自身钩子之前调用
3）watch、computed、methods等：值为对象的选项，将被合并为同一个对象，两个对象键名冲突时会覆盖混入对象中的方法

特点

1）与vuex的区别
Vuex：用来做状态管理，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之改变
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量时相互独立的，值的修改在组件中不会相互影响
2）与公共组件的区别
公共组件：在父组件中引入组件，相当于在父组件中给出一篇独立的空间供子组件使用，然后根据props来传值，但本质上两者时相对独立的
Mixins：在引入混入对象之后，混入对象与组件中的同名选项进行合并，相当于扩展了父组件，可以理解为形成了一个新的组件

注意

当混入对象methods选项里面包含异步请求函数，而我们又需要再组件中使用异步请求函数的返回值，会出现取不到此返回值的情况
Mixin中

组件中

此时会打印undefined
解决方案：不要返回结果而是直接返回异步函数
Mixin中

组件中

参考文章。
[1] https://www.cnblogs.com/Ivy-s/p/9937173.html
[2] https://cn.vuejs.org/v2/guide/mixins.html