axios n'est pas définie en vue js cli

J'ai installé axios à l'aide de la npm install axios commande c'est mon package.json dépendances

 "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

Je me suis inscrit à l'axios dans mon main.js fichier.

import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'

import axios from 'axios'
import App from './App'
import routerList from './routes'

Vue.use(axios)
Vue.use(BootstrapVue)
Vue.use(VueRouter)

Quand j'ai essayé d'utiliser axios dans un de mes composants, j'obtiens cette erreur:

Uncaught ReferenceError: axios is not defined

Comment résoudre ce problème?

  • L'erreur peut être de n'importe quel fichier. Vérifiez tous les lieux que vous essayez de l'utiliser et assurez-vous de l'importer correctement partout!
InformationsquelleAutor Beginner | 2018-07-17
  1. 25

    Vue.use implique l'ajout de plugins. Cependant, axios n'est pas un plugin pour Vue, de sorte que vous ne pouvez pas l'ajouter à l'échelle mondiale via use.

    Ma recommandation est de l'importation de axios seulement lorsque vous en avez besoin. Mais si vous avez vraiment besoin pour accéder à l'échelle mondiale, comme vous pouvez l'ajouter à prototype.

    Vue.prototype.$axios = axios

    Ensuite, vous pouvez accéder à axios en vue à l'aide de this.$axios

    • il dit vue non défini
    • les vôtres sont Vue au lieu de vue, désolé pour la faute de frappe
    InformationsquelleAutor user3003238
  2. 9

    Solution 1 (Non recommandé):

    Dans main.js, ajoutez cette ligne à la place de import axios from 'axios'

    window.axios = require('axios');

    Et supprimer

    Vue.use(axios)

    Solution 2 (Méthode Recommandée):

    À l'aide de window est généralement considéré comme une mauvaise pratique, alors vous feriez mieux d'utiliser axios la manière suivante:

    1) Créez un dossier nommé plugins à l'intérieur de votre src répertoire.

    2) Ensuite, créez axios.js fichier à l'intérieur de ce répertoire. Nous mettrons tous nos axios logique ici et à l'utilisation d'axios une Vue plugin.

    3) Ajouter le texte suivant:

    import ax from 'axios'

//insert all your axios logic here

export const axios = ax

export default {
    install (Vue, options) {
        Vue.prototype.$axios = ax
    }
}

    4) Dans src/main.js, ajoutez la ligne suivante:

    import Vue from 'vue' //You can skip this line
import VueAxios from './plugins/axios'

Vue.use(VueAxios)

    Maintenant, vous pouvez utiliser axios comme this.$axios dans vos composants. Donc, quelque chose comme this.$axios.get().

    Par conséquent, vous pouvez importer axios avec la ligne suivante:

    import { axios } from '@/plugins/axios'

    Maintenant, vous pouvez utiliser axios directement dans votre magasin.

    Ou vous pouvez également l'utiliser comme Vuex plugin:

    import { axios } from '@/plugins/axios'

const axiosPlugin = store => {
   store.$axios = axios
}

new Vuex.Store({
    ...,
    plugins: [axiosPlugin]
})

    Maintenant, vous pouvez l'utiliser comme this.$axios en Vuex.

    Que c'est!

    • Ne sais pas pourquoi c'est arriver downvotes. Il ne le travail! J'ai juste essayé.
    • Il fonctionne, cependant, il est toujours une mauvaise pratique pour affecter la variable à window sauf si pas d'autres choix sont disponibles. BTW, je ne suis pas celui qui vous donnent downvotes
    • Oui, je sais! Depuis qu'il n'est pas d'accepter toutes les réponses, je viens de lui a donné cette solution.
    • C'est ce que j'ai utilisé trop de. c'est correct
    InformationsquelleAutor Sanjay
  3. 4

    Également installer vue-axios et de les importer dans main.js

    import VueAxios from 'vue-axios'

    Puis dans main.js:

    Vue.use(VueAxios, axios)

    Maintenant, si je ne me trompe pas dans vos méthodes que vous pouvez utiliser, par exemple:

    let uri = 'http://localhost:4000/tickets/add';
this.axios.post(uri, this.ticket).then((response) => {
    console.log(response);
});
    • dois-je installer pour que VueAxios du mécanisme national de prévention?
    • ce que je veux dire, c'est dans cette ligne d'importation VueAxios de 'vue-axios'
    • je n'ai pas installer la vue-axios dois-je l'installer?
    • npm install vue-axios --save
    InformationsquelleAutor user3918528
  4. 3
    import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios;

    puis à l'intérieur de votre partie, vous pouvez commencer à utiliser axios comme ceci:

    {
    methods: {
        someMethod() {
            this.$http.get('/users').then(() => {
                //do something
            })
        }
    }
}
    InformationsquelleAutor Julian Paolo Dayag
  5. 2

    Utiliser la commande suivante pour installer mnp

     npm install axios --save

    Après l'exécution de la commande ci-dessus à l'importation comme mentionné ci-dessous:

    import axios from 'axios'
    InformationsquelleAutor Ajay
  6. 0

    j'ai trouvé dans laravel projet window.axios = require('axios');
    lorsque je l'insère dans myproject. de tous les beaux!

    InformationsquelleAutor Mike
  7. -2

    Essayer ce code:

    import axios from 'axios'
    Vue.use(axios)
    InformationsquelleAutor John