0

Estoy probando con una aplicación Vue y la CLI. He estado usando vue-resource y pude acceder a él en todos mis componentes simplemente pasándolo a Vue.use (VueResource). ¿Cómo puedo lograr esto con axios, y no tener que importarlo en cada componente, sino simplemente definirlo una vez en el archivo main.js?

2 respuestas 2

1

Primero debes instalar las siguientes dependencias a tu proyecto

axios

vue-axios

Instalación con NPM

npm i --save axios vue-axios

Ahora en tu "main.js"

import Vue from 'vue';
import Axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
});

Despues de esto podras utilizar Axios en cualquier componente, por ejemplo:

methods: {
  async fetch() {
    const data = await this.axios.get(`${process.env.API_BASE}/users`);
    if(data) {
      console.log(data); 
    } else {
      console.log('something went wrong');
    }
  }
3
  • disculpa, es necesario instalar vue-axios? por que ? para que?. Gracias! el 3 ago. 2018 a las 14:56
  • No es necesario, solo es una vía más para poder implementar Axios en Vue, es decir, sin esta dependencia no podría usar Axios en los componentes solamente escribiendo "this.axios", por lo que he visto es muy común utilizarla el 5 ago. 2018 a las 6:26
  • actualmente estoy usando axios en vue cli 3 sin la necesidad de instalar esta dependencia, quizas ellos realizaron cambios para evitar usar el this el 8 ago. 2018 a las 13:05
1

Puedes instalar simplemente axios, con el comando

npm install axios --save

Luego lo importas en tu archivo main.js:

import axios from 'axios'

Y creas un atajo (también en el archivo main.js) para poder usarlo en todos tus componentes:

Vue.prototype.$http = axios;

Ahora simplemente te queda usar: this.$http para llamarlo desde tu componente, por ejemplo:

<script>
export default {
    data() {
        return {
            consulta: []
        }
    },
    created() {
        this.$http.get("AQUÍ LA URL A LA QUE LLAMAS")
        .then(respuesta => {
              this.consulta = respuesta.data
            })
            .catch(error => {
              console.log(error)
            })
    }
}
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.