vue3 - 将 axios 等方法绑定到原型上供全局使用

今天来说说在vue3 中如何将像axios这样的方法绑定到vue原型上供全局使用。我们用过vue2.x 都知道，在vue2.x中是通 Vue.prototype 来绑定的，像这样Vue.prototype.$toast = Toast。在vue3中取消了Vue.prototype，推荐使用globalProperties来绑定，所以下面我分享一下使用方式谦代码。PS：这里以axios为例，大家可根据需要稍做修改。

一、设置全局
  在使用axios之前，要记得先安装axios，然后在main.js文件中将axios绑定到原型上，如下所示：

相关代码：

// main.js
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.use(router).mount("#app")

二、使用
  在使用之前值得注意的是，vue3是没有this的，所以我们需要用到vue3中的getCurrentInstance()方法来获取上下文，它就相当于vue2.x中的this了。

相关代码：

import { getCurrentInstance} from "vue";

const { proxy } = getCurrentInstance();
proxy.$http.get("https://img-home.csdnimg.cn/data_json/toolbar/toolbar0812.json").then((response) => {
    console.log(response);
});

————————————————
版权声明：本文为CSDN博主「紫菀檀ss」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/LiaoFengJi/article/details/120020908