Mixin在vueAPI 中的定义是混入，可以是 全局混入也可以 局部混入（注：不推荐在应用代码中使用）;但是有一点要做注意，也是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('取消操作')
})
}
},
}
}
本文章只做工作、知识点记录；
网友评论