Как правильно подключить и использовать vue-axios?

Question

[Дмитрий Кузнецов]

Установил axios в своё приложение Vuejs, начал его использовать, но в консоли выдаётся, что не установлен он. В чём проблема?
В package.json он находится. Пробовал даже npm install и т.п. - эффект тот же.

main.js

// Главные модули
import Vue from 'vue'
// *******
import axios from 'axios'
import VueAxios from 'vue-axios'

// Главные компоненты
import App from './App.vue'
import Routes from './routes.js'

// Включение главных модулей
// *******
Vue.use(VueAxios, axios)

// Настройка модулей
axios.defaults.baseURL = 'http://api.site.ru/'; // Базовый URL адрес
axios.defaults.headers.common['X-CSRF-TOKEN'] = '*************************************************';    // Токен

new Vue({
    el: '#app',
    render: h => h(App),
    router: Routes
})

Register.vue

<template>
    <form>
        <v-text-field label="Логин:" required
                      v-model="register.login" :counter="10"
                      v-validate="'required|min:4'"
                      data-vv-name="register.login" data-vv-as="login"
                      :error-messages="errors.collect('register.login')">
        </v-text-field>

        <v-text-field label="E-mail:" required
                      v-model="register.email" v-validate="'required|email'"
                      data-vv-name="register.email" data-vv-as="e-mail"
                      :error-messages="errors.collect('register.email')">
        </v-text-field>

        <v-text-field label="Пароль:" type="password" required
                      v-model="register.password" v-validate="'required|min:6'"
                      data-vv-name="register.password" data-vv-as="password"
                      :error-messages="errors.collect('register.password')">
        </v-text-field>

        <v-btn color="success" :loading="loading" :disabled="loading" @click="submitRegister()">
            Зарегистрироваться
            <span slot="loader">Регистрация аккаунта...</span>
        </v-btn>
    </form>
</template>

<script>
    export default {
        name: 'auth_register',
        metaInfo: {
            title: 'Регистрация'
        },

        data() {
            return {
                loading: false, // Кнопка загрузки
                loader: null,   // Кнопка загрузки

                register: {},   // Данные регистрации
            }
        },

        methods: {
            submitRegister() {
                this.loading = true

                axios.post('auth/register', this.register)
                    .then((response) => {
                        console.log(response.data)

                        this.loading = false
                    })
                    .catch((error) => {
                        console.log(error)
                        this.loading = false
                    })
            }
        }
    }
</script>

Ошибки в консоли

[Vue warn]: Error in event handler for "click": "ReferenceError: axios is not defined"

found in

<VBtn>
       <AuthRegister> at src\components\Auth\Register.vue
         <VContent>
           <VApp>
             <App> at src\App.vue
               <Root>

ReferenceError: axios is not defined

Answer 1

[Андрей Хохлов]

https://www.npmjs.com/package/vue-axios#usage

Comments

[Дмитрий Кузнецов]

Ошибка осталась, но немного изменилась(

[Vue warn]: Error in event handler for "click": "ReferenceError: Vue is not defined"

ReferenceError: Vue is not defined

[Дмитрий Кузнецов]

Блин, поторопился с выводами...нужно было писать this.axios...
Благодарю!)

Answer 2

[akass]

Vue.axios('url').then(response => console.log(response));

Comments

[Дмитрий Кузнецов]

Ошибка осталась, но немного изменилась(

[Vue warn]: Error in event handler for "click": "ReferenceError: Vue is not defined"

ReferenceError: Vue is not defined

[Дмитрий Кузнецов]

Блин, поторопился с выводами...нужно было писать this.axios...
Благодарю!)

[akass]

Дмитрий Кузнецов, Вы первый день на js пишете? Импорт то сделайте.

import Vue from 'vue';
    export default {
        name: 'auth_register',
        metaInfo: {
            title: 'Регистрация'
        },

        data() {
            return {
                loading: false, // Кнопка загрузки
                loader: null,   // Кнопка загрузки

                register: {},   // Данные регистрации
            }
        },

        methods: {
            submitRegister() {
                this.loading = true

                Vue.axios.post('auth/register', this.register)
                    .then((response) => {
                        console.log(response.data)

                        this.loading = false
                    })
                    .catch((error) => {
                        console.log(error)
                        this.loading = false
                    })
            }
        }
    }

[akass]

Да, можно и через this, если вы считаете что вам так удобнее.

[Дмитрий Кузнецов]

akass, не особо хорошо знаю JS...импорт у меня в главном файле, так что это не совсем то, что нужно было бы. Всё равно спасибо!)

[akass]

Дмитрий Кузнецов, от того что вы бы еще раз сделали импорт, ничего бы не сломалось

[Дмитрий Кузнецов]

akass, а разве это не больше (хоть на капельку) нагружает систему/приложение?

[Андрей Хохлов]

Дмитрий Кузнецов, нет, вебпак импортирует всё по 1 разу

[Дмитрий Кузнецов]

Андрей Хохлов, thx)