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();
    },
  }
}