Al igual que el título, quiero agregar Axios al prototipo de Vue. Entonces, cuando quiero usarlo, puedo usarlo así this.$axios en lugar de importarlo cada vez.
CÓDIGO:
//plugins/axios.ts import axios from 'axios' import router from '../router/index' const errorHandle = (): void => {}; const instance = axios.create({ // baseURL: process.env.NODE_ENV == 'development' ? '' : '' baseURL: 'http://localhost:3000', timeout: 1000 * 12 }); instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' export default instance import { createApp } from 'vue' import App from './App.vue' import installElementPlus from './plugins/element' import instance from './plugins/axios' import router from './router' const app = createApp(App).use(router) installElementPlus(app) // app.config.globalProperties.http = instance app.config.globalProperties.$axios= instance app.mount('#app') Sin embargo, hay un problema cuando trato de usarlo así: this.$axios .
TS2339: Property '$axios' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.¿Cómo podría solucionar este problema?
Puede usar provide / inject o definir una propiedad de configuración global, que reemplaza a Vue.prototype en Vue 3:
provide / inject (para API de Composición u Opciones)Proveer
import axios from 'axios'; const app = Vue.createApp(App); app.provide('$axios', axios); // Providing to all components during app creationInyectar
API de composición:
const { inject } = Vue; ... setup() { const $axios = inject('$axios'); // injecting in a component that wants it // $axios.get(...) }API de opciones:
inject: ['$axios'], // injecting in a component that wants it import axios from 'axios'; const app = Vue.createApp(App); app.config.globalProperties.$axios = axios;API de opciones:
this.$axios Nota: Esto es solo para la API de opciones. Evan You (creador de Vue) dice : " config.globalProperties está diseñado como una vía de escape para replicar el comportamiento de Vue.prototype . En las funciones de setup , simplemente importe lo que necesita o use explícitamente provide / inject para exponer las propiedades a la aplicación".
Hay una manera de usar globalProperties dentro de una función de configuración. Aunque esto podría considerarse un anti-patrón. Sería mejor usar provide/inject si es posible. Pero si hay una biblioteca que usa globalProperties y realmente necesita acceder a ella desde la configuración, así es como podría hacerlo.
<script setup> import { getCurrentInstance } from 'vue' const app = getCurrentInstance() const progressBar = app.appContext.config.globalProperties.$Progress progressBar.start() </script>