vue mixins 混入项目实例

官网解释：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
简单理解就是mixin可以提取复用的功能，并把混入对象混入组件成为组件本身的功能
由于公司的项目中有很多列表页，每个列表页都有很多检索项，分页功能，这里把检索功能的 ”搜索“， ”刷新“按钮，和分页的方法写到mixin中，避免很多列表重复调用同样功能的函数

import { clearObj } from "@/utils";
export const mixin = {
  data() {
    return {
      pageObj: {
        pageSize: 10
      },
      pageTotal: 0
    }
  },
  created () {
    if (!this.pageObj.pageNum) { // 默认分页字段currentPage,页面不需再次定义
      this.pageObj.currentPage = 1
    }
  },
  computed: {
    "pageObj.pageNum" () { // 分页字段为pageNum，页面需定义pageObj.pageNum
      if (this.pageObj.pageNum) {
        delete this.pageObj['currentPage']
      }
    }
  },
  methods: {
    handleSizeChange (size) { // 每页的数据量改变
      this.pageObj.pageSize = size;
      if (this.pageObj.currentPage) {
        this.pageObj.currentPage = 1;
      }
      if (this.pageObj.pageNum) {
        delete this.pageObj['currentPage'] // 这步操作为了避免分页字段为”pageNum“时，同时存在”currentPage“，可以让后端把所有分页字段固定为”currentPage“，就不需要这步了。
        this.pageObj.pageNum = 1;
      }
      this.getList() // 重新获取列表数据
    },
    handleCurrentChange (page) { // 当前页码改变
      if (this.pageObj.currentPage) {
        this.pageObj.currentPage = page;
      }
      if (this.pageObj.pageNum) { // 这步操作为了避免分页字段为”pageNum“时，同时存在”currentPage“，可以让后端把所有分页字段固定为”currentPage“，就不需要这步了。
        delete this.pageObj['currentPage']
        this.pageObj.pageNum = page;
      }
      this.getList()
    },
    handleRefresh() { // 清空检索项并请求列表数据
      if (this.pageObj.currentPage) {
        this.pageObj.currentPage = 1;
      }
      if (this.pageObj.pageNum) { // 这步操作为了避免分页字段为”pageNum“时，同时存在”currentPage“，可以让后端把所有分页字段固定为”currentPage“，就不需要这步了。
        delete this.pageObj['currentPage']
        this.pageObj.pageNum = 1;
      }
      this.pageObj.pageSize = 10;
      clearObj(this.formSearch);
      this.getList();
    },
    handleSearch() { // 搜索数据
      if (this.pageObj.currentPage) {
        this.pageObj.currentPage = 1;
      }
      if (this.pageObj.pageNum) { // 这步操作为了避免分页字段为”pageNum“时，同时存在”currentPage“，可以让后端把所有分页字段固定为”currentPage“，就不需要这步了。
        delete this.pageObj['currentPage']
        this.pageObj.pageNum = 1;
      }
      this.getList();
    },
  }
}