axios не определен в vue js cli

Я установил axios, используя команду npm install axios это мои зависимости package.json

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

Я зарегистрировал axios в моем файле 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)

Когда я пытался использовать axios в одном из моих компонентов, я получаю эту ошибку:

Uncaught ReferenceError: axios is not defined

Как это исправить?

Ответ 1

Vue.use означает добавление плагинов. Однако axios не является плагином для Vue, поэтому вы не можете добавлять его глобально с помощью use.

Моя рекомендация импортирует axios только тогда, когда вам это нужно. Но если вам действительно нужно получить доступ к нему по всему миру, вы можете добавить его в прототип.

Vue.prototype.$axios = axios

Затем вы можете получить доступ к axios в vue, используя this.$axios

Ответ 2

Решение 1 (не рекомендуется):

В main.js добавьте эту строку вместо import axios from 'axios'

window.axios = require('axios');

И удалить

Vue.use(axios)

Решение 2 (рекомендуемый подход):

Использование window как правило, считается плохой практикой (забавно, что Laravel действительно использует этот способ), поэтому лучше использовать axios следующим образом:

1) Создайте папку с именем plugins внутри вашей директории src.

2) Затем создайте файл axios.js внутри этого каталога. Мы разместим здесь всю нашу логику axios и будем использовать axios в качестве плагина Vue.

3) Добавить следующее:

import axios_http from 'axios'

// insert all your axios logic here

export const axios = axios_http

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

4) В src/main.js добавьте следующее:

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

Vue.use(VueAxios)

Теперь вы можете использовать axios как this.$axios в ваших компонентах. Так что-то вроде this.$axios.get().

Тем не менее, в Vuex, вы не можете получить доступ к this, чтобы вы получили импортировать axios из plugins/axios.js файла.

Следовательно, вы можете импортировать axios со следующей строкой:

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

Теперь вы можете использовать axios прямо в вашем магазине.

Это!

Ответ 3

Также установите vue-axios и импортируйте в main.js

import VueAxios from 'vue-axios'

Тогда в main.js:

Vue.use(VueAxios, axios)

Теперь, если я не ошибаюсь в ваших методах, вы можете использовать, например:

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

Ответ 4

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios;

то внутри вашего компонента вы можете начать использовать аксиомы следующим образом:

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

Ответ 5

я нашел в проекте window.axios = require('axios'); когда я вставлю его в мой проект. что все будет хорошо!

Ответ 6

Используйте следующую команду для установки npm

 npm install axios --save

После выполнения вышеупомянутой команды импорта, как указано ниже:

import axios from 'axios'

Ответ 7

Попробуйте следующие коды:

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