Mixin混入原理及使用

MixinvueAPI 中的定义是混入,可以是 全局混入也可以 局部混入(注:不推荐在应用代码中使用);但是有一点要做注意,也是Mixin本身问题所在:
请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为[插件](https://cn.vuejs.org/v2/guide/plugins.html)发布,以避免重复应用混入

使用方式

首先声明一个mixin对象,然后引入

//1.可以声明对象,也可以import引用对象,这里声明对象
var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
import store from '@/store/index'
import router from '@/router/index'
//2.可以写入,也可以import引用,这里使用引用
import mixin from '@/mixin/index'
new Vue({
    mixins: [mixin],
    store,
    router,
    render: h => h(App),
}).$mount('#app')

//src/mixin/index.js
import { parseTime } from '@/utils/index.js'
export default {
    inject: ['routerReload'],
    data() {
        return {
            mixinPageTotal: 0, // 总页码
            mixinLoading: false,
            mixinTableDatas: [], // 表格数据
            mixinPageInfo: {}, //分页数据
            mixinSubmitLoading: false, //提交按钮loading
            mixinShowLogDialog: false, // 显示弹窗组件,
            mixinRequestLogInfo: {}, //  查看日志请求数据
        }
    },
    computed: {
        /**
         * 获取明天日期
         * @date 2020.08.21
         */
        tomorrowDate() {
            return parseTime(new Date().getTime() + 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
        },
        /**
         * 获取今天日期
         * @date 2020.08.21
         */
        todayDate() {

            return parseTime(new Date().getTime(), '{y}-{m}-{d}')
        },
        insetCityTwo() {
            const cityInfo = JSON.parse(localStorage.getItem('cityInfo'))
            return cityInfo.code == 999999 ? '' : cityInfo.code
        }
    },
    mounted() {

    },
    methods: {
        insetCity(formName, type = 'cityCode') {
            const cityInfo = JSON.parse(localStorage.getItem('cityInfo'))
            this[formName][type] = cityInfo.code == 999999 ? '' : cityInfo.code
        },
        /**
         * 筛选项重置
         * @param {*} key 需要重置的字段
         */
        mixinReset(key) {
            const cityInfo = JSON.parse(localStorage.getItem('cityInfo'))
            this[key] = this.$options.data()[key]
            if (cityInfo.code != 999999) { // 非超管
                const hasCityCode = 'cityCode' in this[key]
                const hasCityId = 'cityId' in this[key]
                if (hasCityCode) {
                    this[key].cityCode = cityInfo.code
                } else if (hasCityId) {
                    this[key].cityId = cityInfo.code
                }
            }
        },
        /**
         * 显示弹出层
         * @param {string,需要关闭元素的ref名称} refName
         */
        mixinShowDialog(refName) {
            this.$refs[refName].visible = true
        },
        /**
         * 关闭弹出层
         * @param {string,需要关闭元素的ref名称} refName
         */
        mixinCloseDialog(refName) {
            this.$refs[refName].visible = false
        },
        /**
         *  获取表格数据
         * @param {object, 请求参数} params
         * @param {function, 请求接口的方法} apiFn
         */
        async mixinGetTableDatas(params, apiFn) {
            this.mixinLoading = true
            const res = await apiFn(params)
            if (res) {
                this.mixinPageTotal = Number(res.total)
                this.mixinTableDatas = res.records || res
            } else {
                this.mixinPageTotal = 0
                this.mixinTableDatas = []
            }
            this.mixinLoading = false
        },
        /**
         * 分页操作
         * @param  {object, 返回的分页参数} param
         * @param  {string} formData
         * @param  {function, 回调函数} callback
         */
        mixinHandlePage(param, formData, callback) {
            this.mixinPageInfo = param
            Object.assign(this[formData], param)
            callback && callback()
        },
        /**
         * 提交表单
         * @param  {string, 返回的分页参数} formName
         * @param  {function, 请求接口的方法} apiFn
         * @param  {object, 请求接口的参数} data
         * @param  {function, 调用接口成功后的回调函数} successCallback
         * @param  {function, 调用接口失败后的回调函数} failCallback
         */
        mixinSubmit({ formName, apiFn, data = null, successCallback = null, failCallback = null }) {
            let formRef = this.$refs[formName].$refs.form
            formRef.validate(async(valid) => {
                if (valid) {
                    this.mixinSubmitLoading = true
                    if (!data) {
                        data = {}
                        formRef.$data.fields.forEach(e => {
                            data[e.labelFor] = e.fieldValue
                        })
                    }
                    const res = await apiFn(data)
                    if (res.code == 200) {
                        this.$message.success('操作成功')
                        successCallback && successCallback()
                        this.mixinSubmitLoading = false
                    } else {
                        failCallback && failCallback()
                        this.mixinSubmitLoading = false
                    }
                } else {
                    return false
                }
            })
        },
        /**
         * table行内按钮事件
         * @param {Number, 事件类型} type
         * @param {Object, 操作行数据} row
         * @param {Array, 整体数据} tableData
         * @date 2020.08.21
         */
        mixinTableOperation(type, row, tableData) {
            if (type === 1) {
                // 修改
                if (!this.copyRow) { // 之前的编辑操作未提交或保存 不允许操作新的行数据
                    this.tableOperationPublicFn(tableData, row, true)
                }
            } else if (type === 2) {
                // 提交
                this.$store.commit('addGoodsItem', this.copyRow) //问题应该出在这里
                this.tableOperationPublicFn(tableData, row, false)
            } else {
                // 取消
                const propIndex = tableData.findIndex(item => item.id == this.copyRow.id)
                tableData.splice(propIndex, 1, this.copyRow)
                this.tableOperationPublicFn(tableData, row, false)
            }
        },
        /**
         * table行操作提取公共方法,当前行深拷贝
         * @param {Array, 整体操作数据} tableData
         * @param {Object, 操作行数据} row
         * @param {Boolean, 控制当前行是否可编辑} show
         *
         */
        tableOperationPublicFn(tableData, row, show) {
            const propIndex = tableData.findIndex(item => item.id == row.id)
            this.$set(tableData[propIndex], 'show', show)
            if (show) {
                this.copyRow = JSON.parse(JSON.stringify(row))
            } else {
                this.copyRow = null
            }
        },
        /**
         * 编辑操作---适用于查询详情后弹出编辑框场景
         * @param  {object, 编辑的参数} row
         * @param  {string, 接口返回数据赋值} formData
         * @param  {function, 接口api} apiFn
         * @param  {string, 编辑框ref} dialogref
         */
        async mixinEditDetails({ row, formData, apiFn, dialogref }) {
            const res = await apiFn({ id: row.id })
            if (res.code == 200) {
                this[formData] = res.ro
                this.$refs[dialogref].visible = true
            }
        },
        /**
         * 操作日志---适用于页面出现操作日志情况
         * @param  {object, 编辑的参数} row
         * @param  {string, 日志类型} type
         */
        async mixinShowLog(row, type) {
            this.mixinShowLogDialog = true
            this.mixinRequestLogInfo = {
                id: row.id,
                systemLogEnum: type
            }
        },
        /**
         * 删除操作
         * @param  {string, 提示的错误} msg
         * @param  {function, 请求接口的方法} apiFn
         * @param  {object, 请求接口的参数} data
         * @param  {function, 调用接口成功后的回调函数} successCallback
         * @param  {function, 调用接口失败后的回调函数} failCallback
         */
        mixinDeleteElement({ msg, apiFn, data = null, successCallback = null, failCallback = null }) {
            console.log('组件', msg)
            this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                    //判断是否传入函数
                    if (apiFn) {
                        let res = await apiFn(data)
                        if (res) {
                            this.$message.success('操作成功')
                            console.log('删除')
                            successCallback && successCallback()
                        } else {
                            failCallback && failCallback()
                        }
                    } else {
                        successCallback && successCallback()
                    }

                })
                .catch(async() => {
                    console.log('取消操作')
                })
        }
        },
    }
}

本文章只做工作、知识点记录;

推荐阅读更多精彩内容