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
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');
}
}
-
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
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>