1、vue2中全局挂载axios:
在vue2项目中,在入口文件main.js中通过Vue.prototype挂载全局方法对象。
import axios from 'axios'
//将包挂载到vue的原型对象上
Vue.prototype.$http = axios
vue3中全局挂载axios
vue3的基本使用(超详细)_luofei_create的博客-CSDN博客
vue3中取消了Vue.prototype,需要使用官方提供的globalPropertiesAPI在全局挂载方法和属性。
// 引入使用axios
import axios from 'axios';
//将包挂载到vue的原型对象上
const app = createApp(App)
app.config.globalProperties.$http = axios;
app.use(store).use(router).mount('#app')
2、使用全局变量
在vue2中使用:
vue2中使用this.$http , this.$qs
在vue3中使用:
在vue3的setup中是使用getCurrentInstanceAPI获取全局对象
//方法一
<script>
import {useRouter} from 'vue-router';
import {toRefs,getCurrentInstance} from 'vue';
export default{
setup(){
const router = useRouter();
const {proxy} = getCurrentInstance();
const submit = () =>{
proxy.$axios.post('/adminUser/login',{
userName:state.ruleForm.username || '',
passwordMd5:md5(state.ruleForm.password)
}).then(res=>{
console.log(res)
})
}
return{
submit
}
}
mounted(){
this.submit()
}
}
</script>
.....
//方法二:
...
setup(){
const currentInstance = getCurrentInstance()
const {$axios,$route} = currentInstance.appContext.config.globalProperties
function submit(){
$axios.post('/adminUser/login',{
userName:state.ruleForm.username || '',
passwordMd5:md5(state.ruleForm.password)
}).then(res=>{
console.log(res)
})
}
}
通过getCurrentInstance()可以得到许多的全局对象。
总结
vue2中通过Vue.prototype来挂载全局对象,然后通过this.$XXX来获取全局对象。
vue3中通过app.config.globalProperties.$xxx = xxx来挂载全局对象,然后有两种方法来获取:
通过getCurrentInstance()方法获取上下文,这里的proxy就相当于this。例如:proxy.$axios
通过getCurrentInstance()方法获取当前实例,在根据当前实例找到全局实例对象appContext,进而拿到全局实例的config.galbalProperties。
日常记录,原文如下: