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