vue中mixins的使用方法和注意地方

一、什么是Mixins？

mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

二、什么时候使用Mixins？

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

三、如何创建Mixins？

在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象
myMixins.js：

// myMixins.js
export default {
   data () {
     return {
          num:1
      }
   },
   mounted() {
   	  this.speak();
   },
   methods: {
      speak() {
          console.log(this.num);
      },
   }
}

四、如何在组件中使用Mixins？

在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可

五、Mixins的特点

（1）方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。

① todo.vue：组件1中对num进行+1操作

// todo.vue
// 引入 myMixins.js 文件
import {myMixins} from './myMixins';

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    this.num++
  },

}

② list.vue 组件2不进行操作

// list.vue
import {myMixins} from './myMixins';

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
}

③ 分别切换到两个页面，查看控制台输出

会发现组件1改变了num里面的值，组件2中num值还是混合对象的初始值，并没有随着组件1的增加而改变

（2）引入mixins后组件会对其进行合并，将mixins中的数据和方法拓展到当前组件中来，在合并的过程中会出现冲突，接下来我们详细了解Mixins合并冲突

六、关于Mixins合并冲突

（1）值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的

① 我们在混入对象增加num属性、getDate1方法和getDate2方法

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
    getDate1() {
      console.log("num1 from mixins =", this.num )
    },
    getDate2() {
      console.log("num2 from mixins =", this.num )
    },
  }
}

② 我们在引入了myMixins文件的 todo.vue 组件中，增加num属性、getDate1方法和getDate3方法

// todo.vue
import { myMixins } from "./myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {
      num: 18,
    }
  },
  mounted() {
    this.getDate1();
    this.getDate2();
    this.getDate3();
  },
  methods: {
    getDate1() {
      console.log('num1 from template =', this.num)
    },
    getDate3() {
      console.log('num3 from template =', this.num)
    },
  }
}

③ 我们会发现，组件中的age覆盖了混合对象的age，todo.vue 组件的getDate1方法覆盖了混合对象的getDate1方法

（2）值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

myMixins.js 中的console：

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {}
  },
  created() {
    console.log('hello from mixin')
  }

todo.vue 中的 console

// todo.vue
import { myMixins } from "./myMixins.js";

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log('hello from self')
  }
}

控制台打印

七、vue中mixins的使用方法和注意点 (异步请求的情况)

当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下：

Mymixins.js文件中

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
    getDate1() {
	  new Promise((resolve,reject) => {
	      let a = 1;
	      setTimeout(() => {
	        resolve(a)
	      },500)
	    }).then(res => {
	      console.log(res,'res');
	      return res
	  })
    },
  }
}

todo.vue 文件中

// todo.vue
import { myMixins } from "./myMixins.js";

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    console.log(this.getDate1,'template1-func_one')
  }
}

解决方案：不要返回结果而是直接返回异步函数

Mymixins.js文件中

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
   async getDate1() {
	  let result = await new Promise((resolve,reject) => {
	      let a = 1;
	      setTimeout(() => {
	        resolve(1)
	      },500)
	   })
	   return result
    },
  }
}

todo.vue 文件中

// todo.vue
import { myMixins } from "./myMixins.js";

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    this.getDate1().then(res => {
      console.log(res,'template1-res')
    })
  }
}