Vue混入mixins，让你减少一半代码

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

实例

web 应用免不了要和表格打交道，特别是管理类或者后台类的应用。

多个组件可能都包含有表格组件，但是逻辑基本都一样，比如表格分页、分页数量调整等等操作，这个时候就适用混入来实现。

使用

技术栈使用 Vue 项目 + elementUI

在 src 目录下新建 mixins 目录，统一管理混入 js。

然后在该目录下新建 pageMixin.js

pageMixin.js

export const pageMixin = {
  data() {
    return {
      url: '',
      queryData: {
        currPage: 1,
        pageSize: 10
      },
      tableData: {
        rows: [],
        total: 0
      },
      loading: false, // 加载列表数据的Loading
      pageSizes: [10, 20, 30, 50, 100], // 每页行数列表,用于切换每页行数
      layout: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能
    }
  },
  methods: {
    // 查询列表数据
    getList() {
      this.$axios.get(this.url, {
        params: this.queryData
      }).then(res => {
        this.tableData = res.data;
      });
    },
    // 修改当前页
    handleCurrentChange(currPage) {
      this.queryData.currPage = currPage;
      this.getList();
    },
    // 修改每页行数
    handleSizeChange(pageSize) {
      this.queryData.currPage = 1;
      this.queryData.pageSize = pageSize;
      this.getList();
    },
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

组件引入

<template>
  <div>
    <el-table :data="tableData.rows">
      <el-table-column prop="userID" label="ID" width="180"></el-table-column>
      <el-table-column prop="account" label="账号" width="180"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
    </el-table>

    <div style="text-align:left;margin:10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="pageSizes"
        :page-size="pageSizes[0]"
        background
        :layout="layout"
        :total="tableData.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { pageMixin } from "@/mixins/pageMixin";

export default {
  name: "HelloWorld",
  mixins: [pageMixin],
  data() {
    return {
      url: "/api/user/list"
    };
  },
  components: {},
  mounted() {
    this.getList();
  },
  methods: {}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

因各个组件的请求列表 api 不一致，需要对应设置接口变量。

多条件查询

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，发生冲突时以组件数据优先。

有些组件可能有多条件查询，而且各个 api 查询字段都不一样。

这时候在组件中可以设置 queryData 参数。

data() {
    return {
      queryData: {
        title: ""
      },
      url: "/api/user/list"
    };
  },
1
2
3
4
5
6
7
8

这时候接口查询时会加上 title 参数。