Talk about what I think mixin s are used in projects

All three questions are what is a mixin?What does mixin do?How does mixin work?

What is mixin?

In a nutshell, mixins are mixtures. Using mixins reduces duplicate code and improves code reuse

What does mixin do?

For example, I'm writing an erp system, which has a lot of tables and has page breaks whenever there are tables.
N pages have N pages You can choose to handwrite N pages on N pages, but generally if you make
With Vue I'm sure you'll encapsulate the paging as a component Now assume you've already encapsulated the component.
And a series of component methods and component events whether you need to define a separate method for event reception on each page
If that page needs N event receiving methods, then we need to write event receiving on N pages
Method does event handling, but if you use mixin then you don't need to write one on each page individually
Methods received.Using mixin s facilitates code reuse and keeps pages clean

How does mixin work?

First we need to define a mixin file

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

Call to 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 call mixin Internal method'+this.mixinFoo())
                },
                created () {
                        console.log('component created')
                }
        }

</script>

<style scoped>

</style>

Then let's look at the console output

We can clearly see that hooks in mixins take precedence over method outputs in components because hooks and methods in mixins are registered prior to method outputs in components when they are loaded. In other words, methods defined in mixins or hooks take precedence over hook methods in components to override Vue instances, while our methods in componentsThe hook rewrites the Vue instance after rewriting the mixin and strictly follows the Vue lifecycle

Let me give an example as a real demo case

Usually we do this by writing a method to receive parameters for each page I started with

<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:{
                        //Current Page Number Change Call
                        handleCurrentChange(i){
                                //Get tabular data based on current page number changes
                                this._getTableData()
                        },
                        //Get tabular data
                        _getTableData(){

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

                }
        }
</script>

<style scoped>

</style>

After mixin optimization
mixin file

export  let mixin = {
        data(){
                return{
                        pageSize:10,
                        total:1000,
                        currentPage:100
                }
        },
        methods:{
                //Current Page Number Change Call
                handleCurrentChange(i){
                        //Get tabular data based on current page number changes
                        this._getTableData()
                },
        },
}

Component Files

<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:{

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

                }
        }
</script>

<style scoped>

</style>

This way, we don't need to write an event receiving method on every page, which improves code reuse