vue中使用mixin注册全局组件(混入)

用法

• 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
• 混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

是一个对象,可以在全局使用。组件暴露出来的都可以在里面写。比如，data、methods、created、computed、 watch 等等。

使用场景

。重复在不同组件调用的函数，次数超过两次及以上，比如获取数据，刷新页面，如果不想写多次，就可以在全局注册mixin，把重复的代码移到 mixin 。

具体使用

1.在src目录下新建mixin文件，在新建index.js文件

2.将公共函数移到文件中

import { getRoles } from '@/api/setting'
export default {
  // 组件的方法都可以在这儿写
  async created() {},
  data() {
    return {
      roleList: [],
      total1: 0
    }
  },
  methods: {
    async getRoleList() {
      /* 获取所有的角色列表 */
      const res2 = await getRoles()
      this.roleList = res2.data.rows
      this.total1 = res2.data.total
    }
  }
}

3.在全局main.js中混入mixin

// 混入
import mixin from '@/mixin'
Vue.mixin(mixin)
// 实现原理: 将数据,函数挂载到 Vue实例上,
// vuex==利用了mixin

4.组件中直接调用函数