vue3.x+typescript 配置全局属性-vue3配置全局axios

前面我们给大家讲过可以通过app.config.globalProperties.$axios=Axios; 来配置全局属性,但是在ts中使用这样的配置方法的话是没法通过编译的,这个时候我们就需要拓展属性。

下面是在vue3.0定义源文件找到的一段说明注释

/**
 * Custom properties added to component instances in any way and can be accessed through `this`
 *
 * @example
 * Here is an example of adding a property `$router` to every component instance:
 * ```ts
 * import { createApp } from 'vue'
 * import { Router, createRouter } from 'vue-router'
 *
 * declare module '@vue/runtime-core' {
 *   interface ComponentCustomProperties {
 *     $router: Router
 *   }
 * }
 *
 * // effectively adding the router to every component instance
 * const app = createApp({})
 * const router = createRouter()
 * app.config.globalProperties.$router = router
 *
 * const vm = app.mount('#app')
 * // we can access the router from the instance
 * vm.$router.push('/')
 * ```
 */
}

vue3.x+typescript 配置全局axios属性

import { createApp } from 'vue'
import App from './App.vue'
import route from './route'
//配置Antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

//配置请求数据
import {AxiosInstance } from "axios";
import Axios from "axios";

//全局配置Axios
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
      $axios: AxiosInstance;
    }
}
let app=createApp(App)
app.config.globalProperties.$axios=Axios;  //this.Axios
app.use(route)
app.use(Antd)
app.mount('#app')

你可能感兴趣的:(vue3.x+typescript 配置全局属性-vue3配置全局axios)