谈谈我所认为的mixin在项目中的运用

谈谈我所认为的 mixin 在项目中的运用

无非是三个问题 mixin 是什么？mixin 干嘛用？mixin 怎么用？

mixin 是什么？

一句话概括，mixin 是混入，使用 mixin 可以减少重复代码，提高代码的复用

mixin 干嘛用？

比如说我写的是一个 erp 系统，这个系统里又非常多的表格，一有表格就有分页，
N 个页面既要有 N 个分页你可以选择在 N 个页面手写 N 个分页方法但是一般如果使
用 Vue 我相信你会用组件的形式把分页封装起来现在假设你已经封装好组件了。
以及一系列组件方法与组件事件你是否需要在每个页面定义单独方法进行事件接收
，那么个页面是不是需要 N 个事件接收方法，那么我们就需要在 N 个页面写事件接收
方法进行事件处理，但是如果你运用了 mixin 那么你就不需要在每一个页面单独写一
个方法接收。使用 mixin 有利于代码的复用，保持页面的整洁

mixin 怎么用？

首先我们需要定义一个 mixin 文件

export  let mixin = {
         methods:{mixinFoo(){return 'mixinFoo'}
         },
         mounted () {console.log('mixin mounted')
                 console.log(this.mixinFoo())
         },
         created(){console.log('mixin created')
         },
         
 }

mixin 的调用

<template>
        <div class="mixin"></div>
</template>

<script>
        import {mixin} from '@/mixin/mixin'
        export default {
                name: "mixin",
                mixins:[mixin],
                mounted(){console.log('component mounted')
                        console.log('component 调用 mixin 内方法'+this.mixinFoo())
                },
                created () {console.log('component created')
                }
        }

</script>

<style scoped>

</style>

然后我们看一下控制台的输出

我们可以清楚的看到 mixin 中的钩子优先于组件中的方法输出那是因为组件加载时会优先注册 mixin 中的钩子和方法，可以这么说时 mixin 中我们定义的方法或者钩子是优先于组件中的钩子方法去对 Vue 实例重写，而我们在组件中的方法钩子会在对 mixin 重写过后的 Vue 实例再次重写并且严格按照 Vue 生命周期

我举个例子做个实际中的 demo 案例

一般我们会这样子做也就是我开头所说的每个页面写一个方法接收参数

<template>
        <div class="mixin">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next"
                        :total="total">
                </el-pagination>
        </div>
</template>

<script>
        import {mixin} from '@/mixin/mixin'
        export default {
                name: "mixin",
                data(){
                        return{
                                pageSize:10,
                                total:1000,
                                currentPage:100
                        }
                },
                mixins:[mixin],
                methods:{
                        // 当前页码变化调用
                        handleCurrentChange(i){
                                // 根据当前页码变化获取表格数据
                                this._getTableData()},
                        // 获取表格数据
                        _getTableData(){

                                this.total = 100
                                this.pageSize = 10
                                console.log(this.currentPage)
                        }
                },
                mounted () {this._getTableData()

                }
        }
</script>

<style scoped>

</style>

经过 mixin 优化后
mixin 文件

export  let mixin = {data(){
                return{
                        pageSize:10,
                        total:1000,
                        currentPage:100
                }
        },
        methods:{
                // 当前页码变化调用
                handleCurrentChange(i){
                        // 根据当前页码变化获取表格数据
                        this._getTableData()},
        },
}

组件文件

<template>
        <div class="mixin">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next"
                        :total="total">
                </el-pagination>
        </div>
</template>

<script>
        import {mixin} from '@/mixin/mixin'
        export default {
                name: "mixin",

                mixins:[mixin],
                methods:{

                        // 获取表格数据
                        _getTableData(){
                                this.total = 100
                                this.pageSize = 10
                                console.log(this.currentPage)
                        }
                },
                mounted () {this._getTableData()

                }
        }
</script>

<style scoped>

</style>

这样子我们就不需要每一个页面都写一个事件接收方法了，从而提高了代码的复用率