web-dev-qa-db-fra.com

axios n'est pas défini dans la vue js cli

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

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

J'ai enregistré les axios dans mon fichier main.js.

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)

Lorsque j'essaie d'utiliser axios dans l'un de mes composants, le message d'erreur suivant s'affiche:

Uncaught ReferenceError: axios is not defined

Comment régler ceci?

javascriptvue.jsvuejs2axios
4
Beginner

Vue.use signifie ajouter des plugins. Cependant, axios n'est pas un plugin pour Vue, vous ne pouvez donc pas l'ajouter globalement via use.

Ma recommandation importe axios uniquement lorsque vous en avez besoin. Mais si vous avez vraiment besoin d'y accéder à l'échelle mondiale, vous voudrez peut-être l'ajouter au prototype.

Vue.prototype.$axios = axios

Ensuite, vous pouvez accéder à axios in vue en utilisant this.$axios

15
user3003238

Dans main.js, ajoutez cette ligne au lieu de import axios from 'axios'

window.axios = require('axios');

Et enlever

Vue.use(axios)
2
Sanjay
import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios;

dans votre composant, vous pouvez commencer à utiliser axios comme ceci:

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

Également installer vue-axios et 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, vous pouvez utiliser par exemple:

let uri = 'http://localhost:4000/tickets/add';
this.axios.post(uri, this.ticket).then((response) => {
    console.log(response);
});
2
user3918528

Essayez ces codes:

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