vue混入mixin的用法

vue中管理mixin的用法

诸恶中提供了一种混合机制-mixins,可以用来高效的实现组件的复用，mixin与普通组件之间的区别：
普通组件在父组件中引用后相当于开辟了一个的空间，根据父组件中传过来的props值来进行相应的操作
mixin则是在引入组件后，将mixin组件中的各种数据方法与父组件中的相应内容合并在一起，父组件的各种方法都被扩充了
mixin的作用：多个组件都可以共享数据和方法，在引入mixin组件后，mixin中的数据和方法合并到该组件中，可以直接使用，钩子函数两个都会被调用，mixin中的钩子函数会执行

mixin在nuxt中的使用

定义一个和page同级的文件夹mixin，里面新建一个globaljs文件

//引入全局默认的头像
import defaultAvatar from '~/assets/img/default-avatar.png' 

export default {
  data(){
    return{
      defaultAvatar: defaultAvatar,
    }
  },
  computed:{
    IS_LOGIN(){
      return this.$store.state.userId == ''?false:true
      //判断用户是否登录
    }
  },
  methods:{
    inspectButton(auth){
      return thios.$store.state.auth.BUTTONAUTH.indexOf(auth) != -1;
      //判断权限
    }
  }
}
//在插件目录plugins中新建文件globaljs引入mixin  
import globalMix from '~/mixin/global'
Vue.mixin(globalMix)
//在nux.config.js中使用这个插件  
plugins:[
  {
    src: '~/plugins/global',
    ssr: true
  }
]