Vue--mixin混入操作（局部/全局混入）

Vue–mixin混入操作（局部/全局混入）

一、局部混入

定义一个 mixins.js 文件，此文件中可以混入Vue中所有的设置项，methods、computed、watch、data、生命周期函数等都可以。

使用时在组件中直接引入此文件使用即可，它的值是一个数组，表示可以混入多个：

// mixins.js文件
import {
	mdStaffInfo
 } from "@/api/index/index.js" 
export const mixin1 = {
    data() {
        return {
            // status  0正常  1禁用
	          zhanghaoStatus: '0'
        }
    }，
    	methods: {
			getinfo(){
				let data = {
					id: uni.getStorageSync('id')
				}
				mdStaffInfo(data).then(res => {
					this.zhanghaoStatus = res.data.status;
					if(res.data.status == 1){
						let that = this;
						uni.showModal({
							title: '提示',
							content: '账号已被禁用',
							confirmText: "确定退出", // 确认按钮的文字  
							showCancel: false, // 是否显示取消按钮，默认为 true
							confirmColor: '#508FF9',
							cancelColor: '#999999',
							success: (res) => {
								if(res.confirm) {  
									uni.clearStorageSync();
										uni.reLaunch({
											url:'/pages/index/getCode'
										});
								}  
							} 
						});
					}
				});
			}
		}
}
 
export const mixin2 = {
    methods: {
        showName() {
            console.log(this.name)
        }
    }
}

// 某一个组件中
<template>
    ...
</template>
 
<script>
import {mixin1, mixin2} from "../mixins.js"
export default {
    mixins: [mixin1, mixin2]
}    
</script>

二、全局混入

全局混入表示混入到Vue对象中，Vue下的所有组件都会使用混入的方法，一定要注意，是所有的组件，所以，在使用全局混入的时候要确保所有的组件都会使用到。

定义一个mixins.js文件，在main.js文件中引入并使用：

//main.js文件
import {mixin1, mixin2} from "../mixins.js"
 
Vue.mixin(mixin1)
Vue.mixin(mixin2)

如果在使用混入的过程中出现冲突，除生命周期钩子外，其余的都以本组件中的为主，混入的不生效；生命周期钩子产生冲突是先执行混入的声明周期钩子，再执行本组件的生命周期钩子。

三、优缺点

3.1 优点：

1.提高代码复用性

2.维护方便，只需要修改一个地方

3.无需传递状态

3.2 缺点：

1.不清晰的数据来源，不好追溯源

2.不同的开发者使用混入，会存在命名空间冲突

3.乱用的话后期不好维护