vue mixin 以-后台管理系统分页功能为例，mixin的最佳实现

写在前面

---

作者地址
vue mixin在实战项目中的典型妙用，所举例项目是基于vue全家桶（vue-router+vuex+axios+element-ui）的后台管理系统，需要一些有vue项目开发经验的读者阅读。
一般来说呢，管理的数据很多是列表数据，列表数据就常会出现分页功能，而分页功能基本上在以下情况中会调用列表接口

• 页面初始化
• 查询的按钮
• 分页的页码改变
• 分页的长度改变

本文章所分享的基于vue的mixin(代码混入)在实际项目中如何减少代码量，让我们的分页功能简洁高效，不需要在每个页面中写重复的代码

具体步骤：

一、 首先在src下创建mixin文件夹 (其可书写的格式与.vue文件中的script部分)

D949A92E5DCF6E682D1ED6E2A7A3AA31.jpg

二、将其全局混入到main.js

import mixin from './mixin/index'
Vue.mixin(mixin)

三、在mixin.js中定义两个变量

30504C59419BDAFB356B0B0C12161A0D.jpg

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）的参数 规则如下

120CFBB67025AC6D8ED47E01B98A17C9.jpg

尽量与我们的列表方法名称保持一致，增加可读性

二、列表方法的参数获取

 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....)的统一传参，各类接口统一代码风格。
首发网址