vue混入mixin

如果一个变量或者方法在多个页面被使用或者某些钩子里初始化的内容都一致的时候，为了减少代码的冗余，可以使用混入mixin的方式来实现，参考vue官网的使用

例如后台管理系统的时候，都是用表格的形式来显示，因此data的pageNo和pageSize等变量，以及下一页上一页的点击方法其实都是一样的时候，所以我们可以这些变量和方法提取，使用混入的方法来使用，这样就可以避免重复代码的编写，以及方便后期的维护。

export const pagination = {
  data () {
    return {
      pData: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0,
      }
    }
  },
  methods: {
    handleSizeChange(pageSize, callback) {
      this.pData.currentPage = 1;
      this.pData.pageSize = pageSize;
      callback ? callback() : this.getData();
    },
    handleCurrentChange(currentPage, callback) {
      this.pData.currentPage = currentPage;
      callback ? callback() : this.getData();
    }
  }
}
复制代码

简单完整的例子：
mixin/common.js：

export const commonModule = {
    //可以写任何生命周期钩子
    data () {
        return {
            
        }
    },
    methods: {
        goRoute(routeName,query){
            console.log('触发mixin文件的commonjs的goRoute方法')
            this.$router.push({
                name: routeName,
                query
            })
        }
    }
}
复制代码

使用：

<div class="mine elastic-c-c" @click="goRoute('mine')"></div>

import { commonModule } from '@/mixin/common.js'
export default {
  mixins: [commonModule]
  data(){
    return {}
  }
}
复制代码

后面发现，路由跳转的操作会在很多页面都会被使用，因此改变为全局混入：
main.js

import { commonModule } from '@/mixin/common.js'
Vue.mixin(commonModule)
复制代码