Vue中的mixin-局部混入/全局混入

Vue中的mixin-局部混入/全局混入

把多个组件共有的配置提取成一个混入对象,然后通过局部混入或者全局混入,以达到共用配置的目的，简单来说，可以使方法注入到组件当中，在 template 中可以直接调用该方法

定义mixin

在src文件夹下创建一个mixin文件夹(这个文件夹下全部放入一些混入),创建一个checkPermission.js文件

import store from '@/store'
export const checkPermission = {// mixin 混入的时候用这个名字
  methods: {
    checkPermission(key) { // 使用的时候调这个方法
	// 业务
      const { userInfo } = store.state.user
      if (userInfo.roles.points && userInfo.roles.points.length) {
        return userInfo.roles.points.some(item => item === key)
      }
      return false
    }
  }
}

一、局部注入

在组件内部,通过minxins:[混入名称]

import { checkPermission } from '@/mixin/checkPermission.js'

// 与 data 同级
mixins:[checkPermission]

二、全局注入(不推荐)

// src/main.js

import { checkPermission } from '@/mixin/checkPermission'
Vue.mixin(checkPermission)

大多数情况下,只应当应用于自定义选项 局部混入