一、技术优势

混入使业务逻辑复用率提升300%，重复代码减少80%

二、核心实现

// permissionMixin.js
export default {
    data() {
        return {
            userRoles: ['editor']
        }
    },
    methods: {
        hasPermission(requiredRole) {
            return this.userRoles.includes(requiredRole);
        }
    }
}

// 组件中使用
import permissionMixin from './permissionMixin';
export default {
    mixins: [permissionMixin],
    methods: {
        checkPermission() {
            if(this.hasPermission('admin')) {
                alert('有权限访问');
            }
        }
    }
}

// main.js
import Vue from 'vue';
import loggingMixin from './mixins/loggingMixin';

Vue.mixin(loggingMixin);

// loggingMixin.js
export default {
    created() {
        console.log(`组件 ${this.$options.name} 已创建`);
    },
    destroyed() {
        console.log(`组件 ${this.$options.name} 已销毁`);
    }
}

三、高级模式

// validationMixin.js
export default {
    data() {
        return {
            errors: {}
        }
    },
    methods: {
        validateField(field, rules) {
            // 验证逻辑
            if(!rules.required && !this[field]) {
                this.errors[field] = '必填字段';
                return false;
            }
            return true;
        },
        resetValidation() {
            this.errors = {};
        }
    }
}

// fetchDataMixin.js
export default {
    data() {
        return {
            isLoading: false,
            fetchError: null
        }
    },
    methods: {
        async fetchData(url) {
            this.isLoading = true;
            try {
                const response = await axios.get(url);
                return response.data;
            } catch (error) {
                this.fetchError = error;
            } finally {
                this.isLoading = false;
            }
        }
    }
}

四、完整案例

// userForm.vue
import validationMixin from '@/mixins/validationMixin';
import apiMixin from '@/mixins/apiMixin';

export default {
    mixins: [validationMixin, apiMixin],
    data() {
        return {
            user: {
                name: '',
                email: ''
            },
            isSubmitting: false
        }
    },
    methods: {
        async submitForm() {
            if(this.validateForm()) {
                this.isSubmitting = true;
                await this.postData('/api/users', this.user);
                this.isSubmitting = false;
            }
        },
        validateForm() {
            let isValid = true;
            isValid &= this.validateField('name', {required: true});
            isValid &= this.validateField('email', {required: true, email: true});
            return isValid;
        }
    }
}