写在前面
作者简书地址
vue mixin在实战项目中的典型妙用，所举例项目是基于vue全家桶（vue-router+vuex+axios+element-ui）的后台管理系统，需要一些有vue项目开发经验的读者阅读。
一般来说呢，管理的数据很多是列表数据，列表数据就常会出现分页功能，而分页功能基本上在以下情况中会调用列表接口
- 页面初始化
- 查询的按钮
- 分页的页码改变
- 分页的长度改变
本文章所分享的基于vue的mixin(代码混入)在实际项目中如何减少代码量，让我们的分页功能简洁高效，不需要在每个页面中写重复的代码
具体步骤：
一、 首先在src下创建mixin文件夹 (其可书写的格式与.vue文件中的script部分)
二、将其全局混入到main.js
import mixin from './mixin/index'
Vue.mixin(mixin)
三、在mixin.js中定义两个变量
queryParams:{} =>主要用来存放列表接口的查询条件的参数
PAGINATION: {
pageSize: 20,
currentPage: 1,
total: 0
},=》是element-ui中分页组件（ el-pagination）的初始化参数
四、mixin 中的methods定义好触发分页的事件方法
//查询按钮
check() {
this.PAGINATION = {
...this.PAGINATION,
currentPage: 1
}
this.queryParams = this.getParams()
this.useMethod()
},
// 分页长度改变
handleSizeChange(pageSize) {
this.PAGINATION = {
...this.PAGINATION,
pageSize
}
this.queryParams = {
...this.queryParams,
offset: this.PAGINATION.pageSize
}
this.useMethod()
},
//分页页码改变
handleCurrentChange(currentPage) {
this.PAGINATION = {
...this.PAGINATION,
currentPage
}
this.queryParams = {
...this.queryParams,
page: this.PAGINATION.currentPage
}
this.useMethod()
},
上面的this.useMethod()是我们mixin处理分页功能的核心
五、使用this.useMethod()方法让我们调用不同的分页接口
useMethod() {
switch (this.method) {
case 'searchUserListByPage'://用户列表
this.searchUserListByPage()
break
case 'getAdminListByPage'://管理列表
this.getAdminListByPage()
break
case 'getServiceOrderListByPage': //订单列表
this.getServiceOrderListByPage()
break
}
//使用 this[this.method]() 可以替换掉switch循环 推荐这样使用
this.method从何而来呢？
=》来自我们所需要分页功能的vue文件中，表示的是列表方法
题外话：this.userMethod()与this.method是可以省略的，这个各位看官自己去发现吧。由于省略的话与本人尊崇的代码风格不一致，就没去掉了。
补一句（当你这里的case越多你也会感到这个方案的魅力）
还是使用 推荐方法吧
回到我们所需要分页的具体vue文件中：
在这里我们应该写些什么呢？
一、定义一个名为（method）的参数 规则如下
尽量与我们的列表方法名称保持一致，增加可读性
二、列表方法的参数获取
getParams() {
let startTime = ''
let endTime = ''
if (this.rangeTime && this.rangeTime.length > 0) {
startTime = this.rangeTime[0].valueOf() / 1000
endTime = (this.rangeTime[1].valueOf() + this.dayMs) / 1000
}
return {
keyword: this.keyword,
state: this.state,
page: this.PAGINATION.currentPage,
offset: this.PAGINATION.pageSize,
startTime: startTime,
endTime: endTime
}
},
async searchUserListByPage() {
this.loading = true
let res = await searchUserListByPage({ ...this.queryParams })
this.tableData = res.body.list
this.PAGINATION.total = res.body.total
this.loading = false
},
为何里面传参不是 let res = await searchUserListByPage({ ...this.getParams() })
具体参考《具体步骤》中的 三 、和 四、
页面初始化只需要在 created 阶段 调用 this.check()
具体参考《具体步骤》中的 四、 和 五、Ï
created() {
this.check()
},
写在后面
这是本人第一次发表文章，有不懂的同学可以探讨探讨。后续还会发表一篇关于axios的二次封装以及在实际项目中各种请求(get,post,delete....)的统一传参，各类接口统一代码风格。
简书首发网址
