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
  }
]