Vue中mixins的使用（对重复的代码说goodbye）

不知道你们有没有这样的一个感觉，尤其是在写后台管理系统的时候（因为后台管理大部分都是表格，所以几乎每一个路由都有表格，那这样的话我们每次写一个页面的增删改查的时候都需要重复的取获取表格的数据，以及分页的total等等。。），你会发现这个tableData我不是刚刚在那个页面写过吗？tableData和分页的total我不是已经在上一个页面上的data上写过，到头来就是ctrl+c，ctrl+v。大家都是聪明人，肯定不会写重复的代码。
直接上需求：
下面两个不同页面，但是结构都是一样的。

1604408589(1).png 1604408600(1).png

可以看部分代码看出。分页每个页面都会有（handleSizeChange，handleCurrentChange），表格初始化每个页面也都有，那么我每个页面都写一次？？？ 我一开始是这么干的。。。
代码部分

============表格初始化===========
    async initTable(name) {
      let obj = Object.assign({}, this.queryInfo);
      const res = await name(obj);
      if (res.status == 200) {
        this.total = res.result.total;
        this.endPagination = res.result.endRow;
        this.startPagination = res.result.startRow;
        this.tableData = res.result.list;
      }

      console.log(res);
    }
============分页===================
      <div class="f-md main-text-color d-flex a-center" style="">
        <div>显示第 {{ startPagination }} 到第 {{ endPagination }} 条记录</div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 8, 10, 12]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

使用mixin之后
先新建一个mixin.js,代码如下：

var myMixin = {
  data() {
    return {
      startPagination: "",
      endPagination: "",
      total: null,
      tableData: [],
    };
  },
  created: function() {},
  methods: {
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      this.initTable();
    },
    handleCurrentChange(page) {
      this.queryInfo.pageNum = page;
      this.initTable();
    },
    async initTable(name) {
      let obj = Object.assign({}, this.queryInfo);
      const res = await name(obj);
      if (res.status == 200) {
        this.total = res.result.total;
        this.endPagination = res.result.endRow;
        this.startPagination = res.result.startRow;
        this.tableData = res.result.list;
      }

      console.log(res);
    },
  },
};

export default myMixin;

使用：在每个页面引入这个js文件然后使用mixins:[myMixin]即可，官方地址：https://cn.vuejs.org/v2/guide/mixins.html
到此就完成了！

补充

mixin与Vuex的区别
Vuex是全局状态管理，多个页面公用一个数据，一个页面修改了数据，其他的页面也会随之改变，但是mixin则不然，它的原理是想data methods上注入数据，每个页面注入之后都会变成当前data上的数据。
具体看下图 代码对比 我并没有在data上写这个数据 但是data却有这个数据

1604409400(1).png 1604409420(1).png