Solución:
Vue.use
significa agregar complementos. Sin embargo, axios
no es un complemento para Vue
, por lo que no puede agregarlo globalmente a través de use
.
Mi recomendación es importar axios
solo cuando lo necesite. Pero si realmente necesita acceder a él globalmente, puede agregarlo al prototipo.
Vue.prototype.$axios = axios
Entonces puedes acceder axios
en vue usando this.$axios
Solución 1 (no recomendada):
En main.js
, agregue esta línea en lugar de import axios from 'axios'
window.axios = require('axios');
Y quitar
Vue.use(axios)
Solución 2 (enfoque recomendado):
Utilizando window
generalmente se considera una mala práctica, por lo que es mejor usar axios
de la siguiente manera:
-
Crea una carpeta llamada
plugins
dentro de tusrc
directorio. -
Entonces, crea
axios.js
archivo dentro de ese directorio. Pondremos toda nuestra lógica de axios aquí y usaremos axios como un complemento de Vue. -
Agregue lo siguiente:
import ax from 'axios'
// insert all your axios logic here
export const axios = ax
export default {
install (Vue, options) {
Vue.prototype.$axios = ax
}
}
- En
src/main.js
, agregue lo siguiente:
import Vue from 'vue' // You can skip this line
import VueAxios from './plugins/axios'
Vue.use(VueAxios)
Ahora, puede usar axios como this.$axios
en sus componentes. Así que algo como this.$axios.get()
.
Por lo tanto, puede importar axios con la siguiente línea:
import { axios } from '@/plugins/axios'
Ahora puedes usar axios
directamente en tu tienda.
O también puede usarlo como complemento de Vuex:
import { axios } from '@/plugins/axios'
const axiosPlugin = store => {
store.$axios = axios
}
new Vuex.Store({
...,
plugins: [axiosPlugin]
})
Ahora puedes usarlo como this.$axios
en Vuex.
Utilice el siguiente comando para instalar axios
npm install axios --save
Después de ejecutar la importación del comando anterior como se menciona a continuación:
import axios from 'axios'