vue mixins是什么及应用

mixins是什么？

　　官网对此的解释比较文绉绉，通俗的理解很简单，就是提供功能抽象

　　如A，B，C 。。。Z等很多个页面用到同一个功能，此时的做法就应该把该功能抽象出来，mixins就是干这个的

　　当然，如果这个功能一个函数就能解决，就没必要这么干了，单独建个文件，专门放一些公用函数就行，mixins能干的比这大多了

上案例：

　　项目开发中，多个页面要查询数据详情，接口是一样的，但请求参数的不同返回结果也会不同，抽象该功能是最好的方法，以下是代码，具体接口请自行替换

import { fetchMemberReportDetail } from '@/api/memberReport'

export default {
    methods: {
        memberReportDetail(queryObj, cb) {
            fetchMemberReportDetail(queryObj).then(res => {
                if(parseInt(res.status) === 200 && parseInt(res.data.error_code) === 0) {
                    cb && cb.call(this, res.data.data)
                }else{
                    this.$message.error(res.data.error_msg)
                }
            }).catch(res => {
                this.$message.error('网络异常，请稍后再试')
            })
        }
    }
}

　　应用：

import memberReportDetail from '@/mixins/memberReport'

export default {
    name: "hdDetail",
    mixins: [memberReportDetail],
    data() {
        return {
            companyName: '',
            memberType: ''
        }
    },
    created() {
        this.getMemberReportDetail()
    },
    methods: {
        getMemberReportDetail() {
            //  根据需要自行设置查询参数
            const queryObj = {}
            this.memberReportDetail(queryObj, this.setData)
        },
        setData(data) {
            // 根据返回的数据接口自行设置
            this.companyName = data.companyName 
            this.memberType = data.memberType 
        }
    }
}

总结：

　　mixins适用于带有组件功能性质的抽象，组件具有的钩子函数，属性，它全有，而且组件还可以根据自身需要重写mixins方法

vue mixins是什么及应用

猜你喜欢