vue mixins混入的使用

1.mixins就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改，mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式
一个混入对象可以包含任意组件选项。.比如组件的生命周期，data(){return{}}，methods方法等，凡事能在组件上编写的都能在mixins中重新定义

2.什么时候使用Mixins
页面的风格不用，但是执行的方法和需要的数据类似，这时候我们就可以把公共的方法提出来，然后在混入需要用到的组件里面，直接调用。相同的方法写一遍即可

列如：

在src/components/mixin文件夹下创建对应的**.js文件，我的是audio.js

audio.js

import * as api from '../../api/index'
// eslint-disable-next-line no-unused-vars
export const audioUrl = {
  data: () => ({
    //scannedSuccess 扫码成功  scannedFailed  扫码失败   paymentFailed 支付失败
     voiceUrl:{},
  }),
  mounted(){
     this.getFixedSpeech()
  },
  methods: {
      //获取语音资源
    getFixedSpeech(){
        api.getFixedSpeech().then(res=>{
          this.voiceUrl=res
        })
      },
    voiceBroadcast(src){
     const audio = document.getElementById('audio')
     audio.src = src
     audio.play()
   },
  }
}
export const test1 ={
  data: () => ({
  }),
}
export const test2 ={
  data: () => ({
  }),
}

在组件中引入这个mixins对象，通过mixins:[xxx]，使用mixins对象 可以混入多个mixins对象

import { audioUrl,test1.test2 } from "../components/mixin/audio"
export default {
  name: 'smain',
  //混入跟组件有同一个生命周期，混入对象会比组件的先执行
  mixins:[audioUrl,test1,test2], //混入的对象中谁在前面就先调用谁，如audioUrl=>test1=>test2
  data: () => ({
  }),
}

引入mixins之后，即可以像调用data那样调用混入的方法

//调用
this.voiceBroadcast(this.voiceUrl.paymentFailed )