[vue]mixins在项目中的应用

Posted 2021-03-06 danker

权威指南

参考官网链接：https://cn.vuejs.org/v2/guide/mixins.html
更多场景学习：https://zhuanlan.zhihu.com/p/27547999

使用场景

当有多个页面重复调用同一个方法或者同一个变量时，使用mixins可以避免每个*.vue文件中都重写一次这个方法
>需要注意：谨慎使用 global mixin，局部的随意使用

使用举例

在一个管理系统中，会有很多列表页都有分页组件(以element-ui组件为例)，这部分代码重复性很高。分页组件的方法和变量完全可以剥离出来，独立于每个页面管理。

//*.vue页面代码
<template>
    ....省略其它内容...

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="pagination.totalCounts">
    </el-pagination>

    ....省略其它内容...
</template>
<script>
import QueryTable from '@/mixins/queryTable'
export default {
    mixins: [QueryTable('queryList', 'queryForm', 'tableDatas')],
    data() {
        rerturn {
            tableDatas: [
                tableData: [],
                tableHead: []
            ]
            ...省略其它内容...
        }
    },
    methods:{
        queryList(formName, pageIndex) {
            this.$refs[formName].validate((valid) => {
                if(valid) {
                    ...省略其它内容...
                } else {
                    return
                }
            })
        }
    } 

}
</script>

//mixins/queryTable.js
export default function(queryName, formName, tableObjName) {
  return {
    data() {
      return {
        pagination: {
          currentPage: 1,
          pageSizes: [10, 20, 30],
          pageSize: 10,
          totalCounts: 0
        }
      }
    },
    methods: {
      resetTable() {
        this[tableObjName].tableData = []
        this.pagination.totalCounts = 0
        this.pagination.pageSize = 10
        this.pagination.currentPage = 1
      },
      handleSizeChange(val) {
        // 切换每页显示条数
        this.pagination.pageSize = val
        this.pagination.currentPage = 1
        if (this[tableObjName].tableData && this[tableObjName].tableData.length > 0) {
          this[queryName](formName, 1)
        } else {
          this.resetTable()
        }
      },
      handleCurrentChange(val) {
        // 切换页数
        this.pagination.currentPage = val
        if (this[tableObjName].tableData && this[tableObjName].tableData.length > 0) {
          this[queryName](formName, val)
        } else {
          this.resetTable()
        }
      }
    }
  }
}