web-dev-qa-db-fra.com

Importer la méthode Axios globalement dans Vuejs

c'est mon ~/plugins/axios.js fichier:

import axios from 'axios'

let api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/'
})

export default api

Quand je veux utiliser axios dans tous les composants, je dois avoir écrit cette ligne:

import api from '~/plugins/axios

Comment puis-je le configurer globalement, il suffit d'écrire $ api à la place?

vue.jsvuejs2axios
6
KitKit

Vous pouvez créer un plugin et l'utiliser comme ceci dans votre fichier main.js (Si vous utilisez quelque chose comme vue-cli)

import axios from 'axios'

Vue.use({
    install (Vue) {
    Vue.prototype.$api = axios.create({
      baseURL: 'http://localhost:8000/api/v1/'
    })
  }
})

new Vue({
    // your app here
})

Maintenant, vous pouvez faire this.$api.get(...) sur chaque méthode de composant

En savoir plus sur les plugins Vue ici: https://vuejs.org/v2/guide/plugins.html

Fournir/Injecter pourrait également être une option: https://vuejs.org/v2/api/#provide-inject

19
Frondor

Un objet fenêtre est à votre disposition dans le navigateur. Vous pouvez exploiter activement cela en fonction de vos besoins.

Dans le fichier main.js

import axiosApi from 'axios';

const axios = axiosApi.create({
    baseURL:`your_base_url`,
    headers:{ header:value }
});

//Use the window object to make it available globally.
window.axios = axios;

Maintenant dans votre composant.vue

methods:{
    someMethod(){
        axios.get('/endpoint').then(res => {}).catch(err => {});
    }
}

C'est essentiellement comme ça que j'utilise axios globalement dans mes projets. C'est aussi ainsi que Laravel

1
Viral Patel