Saltar al contenido

axios no está definido en vue js cli

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:

  1. Crea una carpeta llamada plugins dentro de tu src directorio.

  2. 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.

  3. 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
    }
}
  1. 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'
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *