vue的mixin混入在项目开发中的使用

随着前端开发的框架的越来越流行，对性能和代码的冗余度也有各种各样的解决方案，其中复用是最核心的也是被广泛使用的方式，项目开发中经常会把共有的部分组件或者数据抽出来做成组件化。

vue也提供了mixin数据混入，本质其实还是单独抽出一部分数据或者钩子、方法等，然后在有需要的组件页面中直接混入，此时当前组件便拥有了该混入的功能。

写个常用的实例，在mixin文件夹中创建xxx.js
mixin：

export const myMixins = {
  data() {
    return {}     //可以混入重复的数据
  },
  inject: ['Id'],    //vue提供的另外一种数据传递方式，用于父组件向子孙组件传递数据，某些组件嵌套链中都会用到的属性
  computed: {
    regionId() {
      return this.Id()    //获取id
    }
  },
  watch: {
    Id: {
      handler: function() {
        this.getData && this.getData()      //只要全局的某个属性变化，那么就自动执行一次更新数据的函数
      },
      immediate: true    //首次进入立即执行一次
    }
  }
}

inject， provide和inject是成对出现的 （这个我单独写一篇细说）
作用：用于父组件向子孙组件传递数据
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

组件中：

import { myMixins } from '../mixins/xxx'
export default {
  mixins: [ myMixins ],
  data() {
  	return {}
}
methods: {
    getData() {    //统一对外暴露为getData，这样，mixin就可以统一触发了
      this.xxx()
    },
    async xxx(){}   //更新数据的方法
}