最近在做页脚版权年份的自动更新，但项目里有多个地方都需要改动，了解到 Vue 里有 mixin 这个概念，发现可以很方便地抽取出来，进行组件化统一管理，下面介绍一下 mixin 的概念，特点和应用场景
介绍
官方解释：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
个人理解：
mixin 是一种可复用的组件，操作简单，代码简洁，比公共组件要更加地 “共享”，不需要 props 传值，并且能合并 mixin 里的钩子函数
特点
-
mixin 里 data() 的数据能合并到各组件中，但只会被当前组件所识别，并不会被共享
大白话翻译：
当前组件可以拿到 mixin 里的参数和对应的值，进行操作。但各组件中对这个值的操作不会互相影响，也不会影响到 mixin 里的原始值
-
值为对象的选项，如 methods,components 等，选项会被合并，键冲突的组件会覆盖混入对象的方法
大白话翻译：
mixin 组件和 当前组件的 methods，components 等会合并，但出现同名的，优先当前组件的，会覆盖mixin 里的
-
值为函数的选项，如 created,mounted 等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用
钩子函数合并，mixin 的执行顺序高于当前组件
与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
与vuex的区别
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
实际使用
以最近处理的页脚版权时间为例：
get-service-time-mixin.js
/**
* @file 请求接口获取服务器时间 更新保存在store 转换成对应的年份 mixin
*/
export default {
data() {
return {
currentYear: new Date().getFullYear(), //初始化当前年份currentYear 本地时间
}
},
mounted() {
this.setTime(); //调用 setTime
},
methods: {
async setTime() {
let serviceTime = Date.now();
//触发请求服务器时间方法
const { currentTime, status } = await this.$store.dispatch(
'getServiceTime'
);
if (status === 'success') {
serviceTime = currentTime;
}
//保存时间到 store
this.$store.commit('setServiceTime', serviceTime);
//根据服务器时间转换成对应的年份 赋值给currentYear
this.currentYear = new Date(serviceTime).getFullYear();
},
},
}
该 mixin 组件里
- 声明了 currentYear，并将请求后服务器时间转换成对应的年份，赋值给currentYear，引入该mixin 的组件都能识别 currentYear 并拿到其在该 mixin 里的值
- 请求了服务器时间，并保存在 store 里，需要获取服务器时间的组件也可以引入该 mixin，在store.state 里取值
Copyright.vue
<template>
<section>
<p>©2013-{{currentYear}} xx有限公司版权所有</p>
</section>
</template>
<script>
import getServiceTimeMixin from '~~/assets/mixins/get-service-time-mixin';
export default {
//引入 mixin
mixins: [getServiceTimeMixin],
}
</script>
