vue3 给全局(每个实例) 添加公共方法

众所周知，vue3，现在不会暴露 Vue 对象给你用了！

那么该如何给 它的每个子组件实例添加公共的方法呢？

比如我们需要给每个实例添加 $axios 方法

vue2 添加的方法很简单

import Vue from 'vue'

import axios from 'axios'

Vue.prototype.$axios = axios

 vue3 添加公共方法的三种方式

第一种：使用 app.config.globalProperties 添加

import { createApp } from 'vue'
import axios from 'axios'

const app = createApp({
  created() {
     console.log(this.$axios)
  }
})

app.config.globalProperties.$axios = axios

window.vm = app.mount('#root')

 第二种：使用 app.mixin 添加

import { createApp} from 'vue'
import axios from 'axios'

const app = createApp({
  created() {
    console.log(this.$axios)
  }
})

app.mixin({
  methods: {
    $axios: axios
  }
})

window.vm = app.mount('#root')

第三种：采用 provide, inject 方法

需要注意的是这种方法需要组建 inject 注入进组件才能使用

import { createApp } from 'vue'
import axios from 'axios'

const app = createApp({
  inject: ['$axios'],
  created() {
    console.log(this.$axios)
  }
})

app.provide('$axios', axios)

window.vm = app.mount('#root')