vue中mixins的工具的封装方式
时间：2023-01-17 12:47:02|栏目：vue|点击： 次
mixins工具的封装
vue的mixins的工具是什么？
就是我们再写信息管理系统时，涉及到大量的增删查改调用后台接口的重复的方法，我们可以把这些方法集合起来直接作为一个js文件，后面可以直接引入，数据和方法都不需要声明，直接使用即可。
再概括一下，就是请求后台接口的方法的集合。
js工具代码
具体注释我会直接写在代码里，然后大家可以自己直接对照着代码看
代码如下：
//这里引入了qs,使用npm install qs就可进行安装，在后面下载的方法里用到（get方法拼接参数），
//如果没有这个需求，可以不引入（同时注意删除下方的下载方法）
import qs from 'qs'
export default {
data() {
return {
//这个mixinViewModuleOptions需要在使用这个工具的时候在vue文件的data中声明
mixinViewModuleOptions: {
mockData: null,
getDataListURL: '', // 数据列表接口 API地址
activatedIsNeed: true, // 此页面是否在激活(进入)的时候，调用查询数据列表接口
queryDataURL: '', // table查询接口
deleteURL: '', // 删除接口
downLoadURL: '', // 下载接口
deleteIsBatch: false, // 是否批量删除
deleteIsBatchKey: 'id', // 删除接口，批量状态下有那个key进行标记操作，比如 pid，uid
// getDataListIsPage: true // 不同的数据接口，返回的数据接口不相同，用次变量来区别
},
dataForm: {}, // 查询条件
dataList: [], // 数据列表
page: 1, // 当前页码
rows: 10, // 每页数
total: 0, // 总条数
dataListLoading: false, // 数据列表，loading状态
dataListSelections: [], // 数据列表，多选项
addOrUpdateVisible: false, // 新增／更新，弹窗visible状态
}
},
created() {
if (this.mixinViewModuleOptions.activatedIsNeed) {
//获取数据的方法
this.getDataList()
}
},
methods: {
// 下载excel
downLoadHandle(id) {
if (!this.dataList.length) {
return this.$message.warning('没有可导出的数据')
}
if (!id) {
return this.$message.warning('id字段无效错误')
}
const ids = this.dataListSelections.map(a => a[id]).join(',')
//最开始引入的qs在这里用到，作用：将dataForm这个对象用‘&'拼接成字符串，再拼到下载链接后
const dataForm = qs.stringify(Object.assign({}, this.dataForm, { ids }))
const url = `${window.SITE_CONFIG.BASE_URL.serverIP}${this.mixinViewModuleOptions.downLoadURL}?${dataForm}`
window.open(url)
},
// 删除
deleteHandle(id) {
if (!id && this.mixinViewModuleOptions.deleteIsBatch
&& this.dataListSelections.length <= 0) {
return this.$message({
message: '请选择删除项',
type: 'warning',
duration: 800,
})
}
this.$confirm('您确定删除此条内容么', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
let ids = ''
if (this.dataListSelections.length) {
ids = this.dataListSelections.map(item =>
`${item[this.mixinViewModuleOptions.deleteIsBatchKey]}`).join(',')
} else {
ids = id
}
this.$http.get(`/${this.mixinViewModuleOptions.deleteURL}`, {
params: {
id: ids,
},
}).then(({ data }) => {
if (data.code !== 1) {
return this.$message.error(data.msg)
}
this.$message({
type: 'success',
message: '删除成功!',
duration: 800,
onClose: () => {
this.getDataList()
},
})
})
}).catch(() => {
})
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.dataForm.id = id
this.$refs.addOrUpdate.init()
})
},
dataListSelectionChangeHandle(val) {
this.dataListSelections = val
},
// 查询
queryHandle() {
this.page = 1
this.getDataList()
},
// 获取table数据
getDataList() {
this.dataList = []
this.dataListLoading = true
return this.$http.get(`/${this.mixinViewModuleOptions.getDataListURL}`, {
params: {
page: this.page,
rows: this.rows,
...this.dataForm,
},
}).then(({ data }) => {
this.dataListLoading = false
if (data.code !== 1) {
this.dataList = []
this.total = 0
return this.$message.error(data.msg)
}
this.dataList = data.data ? data.data : []
this.total = data.total ? data.total : 0
return data.data
}).catch(() => {
this.dataListLoading = false
})
},
// 分页, 每页条数
pageSizeChangeHandle(val) {
this.page = 1
this.rows = val
if (this.dataForm.pageSize) {
this.dataForm.pageNum = 1
this.dataForm.pageSize = val
}
this.getDataList()
},
// 分页, 当前页
pageCurrentChangeHandle(val) {
this.page = val
if (this.dataForm.pageNum) {
this.dataForm.pageNum = val
}
this.getDataList()
},
},
}
三、使用这个文件
1.引入
//js文件名称是view-module.js,引入过来之后命名 mixinViewModule（后面需要用到，注意一致） import mixinViewModule from "@/mixins/view-module";
2.声明
直接只贴声明的代码让人看不明代位置，声明的位置又不好描述，我这里直接贴图：
3.使用文件的html代码
<template>
<section class="main-container-box">
<el-form ref="form" :model="dataForm" inline>
<el-form-item label="商品名称:">
<el-input placeholder="请输入物资名称" v-model="dataForm.goodsName" clearable></el-input>
</el-form-item>
<el-form-item>
//这里的getDataList方法不需要再methods中声明，会直接执行view-module.js中的getDataList方法，参数为上面声明的dataForm
<el-button type="plain" @click="getDataList">查询</el-button>
</el-form-item>
</el-form>
//这里的dataList和view-module.js文件中的数据列表dataList名称要一致，并且可以不用在data中声明
<el-table-self
:data="dataList"
style="width:100%"
:height="'calc(100vh - 1.3rem)'"
>
<el-table-column label="序号" type="index" align="center" header-align="center" width="60"></el-table-column>
//这里就是自己表格中的数据，我只是遍历写出来的，大家可以不用管----↓
<el-table-column
v-for="(item,index) in columnList"
:key="index"
show-overflow-tooltip
:align="item.align"
:fixed="item.fixed"
:prop="item.prop"
:label="item.label"
></el-table-column>
//---------------------------------------------------------------↑
</el-table-self>
//这是分页组件，注意里面的参数：page,rows,total和方法pageSizeChangeHandle,pageCurrentChangeHandle名称都要和view-module中一致
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="rows"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
></el-pagination>
</section>
</template>
总结：在管理信息系统中，基本的表格的增删查改功能有很多，每个都写一个方法对接接口会很麻烦，有了这个js工具了之后，每个文件只需要把它引入，然后传入对应的参数就可以了（mixinViewModuleOptions），只需要注意各个参数和方法名称都要对应起来，不要写错了，就可以节省很多时间和代码啦！
vue组件封装及注意事项
props : {
beanProps : {
type : Object
},
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
},
我们在 props 中接收数据，注意props对象里面 键值 是对改数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型（type类型）的数据，否则报警告
而props对象中的数据，我们可以直接在当前组件中使用 this.beanProps ，可以直接使用。这里要强调一下，props传过来的数据只做展示，不得修改，想修改，再新写一个data中的变量承接做数据的再处理。
调用的时候
<!--要调用的页面组件的页面需要import导入组件页面，然后再起别名-->
import treeSelectPeople from "../../../components/tree-select-people.vue";
<!--导入之后要添加组件到component对象里-->
components: { treeSelectPeople },
<!--然后调用的时候标签名，就是你导入组件起的变量名了-->
<treeSelectPeople :beanProps="newBean.props"></treeSelectPeople>
我们已经会使用 父组件向子组件传数据了,那子组件如何来修改父组件的数据呢？
这里提供 2 种实现方法，但是 第一种不推荐，强烈不推荐
方式一：
selectValue: {
data: '1'
},
//代码段
this.selectValue.data = '我被修改了'
即，父组件将 对象 数据传递给子组件，子组件直接修改props过来的对象的值
可以实现，感觉是一个比较快捷的方式。但是不推荐，这种方式写多了，容易出错，特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好，所以建议大家别这样写。
他的实现原理简单提一下： 这个对象、数组啦，是引用数据类型，说白了，就是存储单元的信息是指针，真正数据在别的地方，通过指针查询的数据，所以这样写，对浏览器来说仅仅是传递了一个指针，数据还是同一份数据。所以你能修改。
方式二：
正儿八经的通过 $emit 方法去掉父组件的方法，在父组件中修改data的数据。（根正苗红的方法，规范写法）（就是在子组件新建一个新的变量来获取父组件传过来的值）
<template> <section class="f-mainPage"> <!--selectFunc 选择完成的回调 searchList 下拉列表的数据--> <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search> </section> </template>
<script type="text/ecmascript-6">
import Search from '../vuePlugin/search'
export default {
data() {
return {
searchList: ['草船借箭', '大富翁', '测试数据'],
// 直接通过props传递对象 修改，挺便捷的,但是不规范
selectValue: {
data: '1'
},
// 通过emit修改，规范写法
selectValue2: ''
}
},
mounted() {},
methods: {
pageGo(path) {
this.$router.push('/' + path)
},
selectFunc(value) {
this.selectValue2 = value
console.log(this.selectValue)
console.log(this.selectValue2)
}
},
components: {
Search
}
}
</script>
