欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3全局掛載使用Axios學(xué)習(xí)實(shí)戰(zhàn)

 更新時(shí)間:2022年06月30日 10:09:24   作者:天問(wèn)  
這篇文章主要為大家介紹了Vue3全局掛載使用Axios學(xué)習(xí)實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

vue2中會(huì)習(xí)慣性的把axios掛載到全局,以方便在各個(gè)組件或頁(yè)面中使用this.$http請(qǐng)求接口。但是在vue3中取消了Vue.prototype,在全局掛載方法和屬性時(shí),需要使用官方提供的globalPropertiesAPI。

一、全局掛載

  • vue2項(xiàng)目中,入口文件main.js配置Vue.prototype掛載全局方法對(duì)象:
import Vue from 'vue'
import router from '@/router'
import store from '@vuex'
import Axios from 'axios'
import Utils from '@/tool/utils'
import App from './App.vue'
// ...
/* 掛載全局對(duì)象 start */
Vue.prototype.$http = Axios;
Vue.prototype.$utils = Utils;
/* 掛載全局對(duì)象 end */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  • vue3項(xiàng)目中,入口文件main.js配置globalProperties掛載全局方法對(duì)象:
import { createApp } from 'vue'
import router from './router'
import store from './store'
import Axios from 'axios'
import Utils from '@/tool/utils'
import App from './App.vue'
// ...
const app = createApp(App)
/* 掛載全局對(duì)象 start */
app.config.globalProperties.$http = Axios
app.config.globalProperties.$utils = Utils
/* 掛載全局對(duì)象 end */
app.use(router).use(store);
app.mount('#app')

二、全局使用

  • vue2中使用this.$http
<script>
  export default {
    data() {
      return {
        list: []
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.$http({
          url: '/api/v1/posts/list'
        }).then(res=>{
          let { data } = res.data
          this.list = data
        })
      },
    },
  }
</script>
  • vue3setup中使用getCurrentInstanceAPI獲取全局對(duì)象:
<template>
  <div class="box"></div>
</template>
<script>
  import { ref, reactive, getCurrentInstance } from 'vue'
  export default {
    setup(props, cxt) {
      // 方法一 start
      const currentInstance = getCurrentInstance()
      const { $http, $message, $route } = currentInstance.appContext.config.globalProperties
      function getList() {
        $http({
          url: '/api/v1/posts/list'
        }).then(res=>{
          let { data } = res.data
          console.log(data)
        })
      }
      // 方法一 end
      // 方法二 start
      const { proxy } = getCurrentInstance()
      function getData() {
        proxy.$http({
          url: '/api/v1/posts/list'
        }).then(res=>{
          let { data } = res.data
          console.log(data)
        })
      }
      // 方法二 end
    }  
  }
</script>
  • 方法一:通過(guò)getCurrentInstance方法獲取當(dāng)前實(shí)例,再根據(jù)當(dāng)前實(shí)例找到全局實(shí)例對(duì)象appContext,進(jìn)而拿到全局實(shí)例的config.globalProperties。
  • 方法二:通過(guò)getCurrentInstance方法獲取上下文,這里的proxy就相當(dāng)于this。

提示: 可以通過(guò)打印getCurrentInstance()看到其中有很多全局對(duì)象,如:$route$router、$store。如果全局使用了ElementUI后,還可以拿到$message$dialog等等。

以上就是Vue3全局掛載使用Axios學(xué)習(xí)實(shí)戰(zhàn)的詳細(xì)內(nèi)容,更多關(guān)于Vue3全局掛載使用Axios的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論