vue3全局挂载组件,vue3怎么在原型上挂载方法
这篇文章主要介绍了vue3如何实现挂载并使用axios，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue3挂载并使用axiosvue全局挂载爱可信
vue3挂载并使用axios
首先在main.js中引入axios并挂载到app.config.globalProperties上
爱可信配置文件放置. assets/js/axios
主页。射流研究…
导入{
createApp
}来自“vue”
从导入应用程序 App.vue
"导入"。/index.css
从导入axios ./assets/js/axios ；
const App=create App(应用程序)；
app.use(路由器)。使用(ElementPlus).挂载(#应用程序)
app。配置。全局属性。$ http=axios
其次配置axios.js文件
axios.js
从" axios "导入axios
从" qs "导入QS；
导入{
ElMessageBox
}来自元素加；
//axios.defaults.baseURL= //正式
axios。默认值。基本URL= http://localhost:8089 //测试
//发布请求头
axios。默认值。标题。post[ Content-Type ]= application/x-www-form-urlencoded；charset=UTF-8 ；
//设置超时
axios。默认值。超时=10000；
axios.interceptors.request.use(
配置={
返回配置；
},
错误={
返回承诺。拒绝(错误);
}
);
axios。截击机。回应。使用(
响应={
if (response.status==200) {
返回承诺。解决(响应);
}否则{
返回承诺。拒绝(响应);
}
},
错误={
ElMessageBox(JSON.stringify(错误),请求异常, {
confirmButtonText:确定，
回调：操作={}
});
}
);
导出默认值{
帖子(网址，数据){
返回新承诺((解决，拒绝)={
axios({
方法： post ，
url，
数据：qs.stringify(数据),
})。然后(res={
解析（结果数据)
})。接住(错误={
拒绝（错误)
});
})
},
获取(网址，数据){
返回新承诺((解决，拒绝)={
axios({
方法：“得到”，
url，
参数：数据，
})。然后(res={
解析（结果数据)
})。接住(错误={
拒绝（错误)
})
})
}
};
最后在.vue中使用
通过getCurrentInstance拿到的中强就有了$http可以调用
导入{
定义一个组件，
getCurrentInstance，
反应性，
斗牛士，
}来自vue ；
导出默认定义组件({
名称：演示，
道具：{},
组件： ,
设置（道具、上下文){
//引用全局变量
const { CTX }=getCurrentInstance()；
控制台。日志(CTX)；
让状态=反应({
规则形式：{
用户名："皮毛",
密码："123",
}
});
函数submitForm() {
ctx .$http.post(/login/xxx ，ruleForm).然后((res)={
//请求成功
});
}
返回{
.toRefs(州),
提交表单，
};
},
});
vue全局挂载axios
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
/头
身体
div id=应用程序
/div
脚本src= ./node _ modules/vue/dist/vuejs /脚本
脚本src= ./node _ modules/axios/dist/axios。js /脚本
脚本
//全局挂载axios:给某视频剪辑软件函数添加一个原型属性$axios指向爱可信
//好处是在某视频剪辑软件实例或组件中不用重复引用Axios，直接用这个10.99美元axios就能执行爱可信方法
Vue.prototype. $ axios=axios
var App={
模板：` 1
divbutton @click=sendAjax 发请求/按钮/div
`,
方法：{
sendAjax() {
console.log(这个$ axios)；
}
}
};
新Vue({
埃尔： #app ，
data() {
返回{
}
},
模板：` 1
App /
`,
组件：{
应用
}
});
/脚本
/body
/html
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。