Laravel Vue Axios未定义。

Question

我在我的laravel应用程序中使用vuetify框架构建了一个简单的表单。 bootstrap.js已经包含了axios客户端，但是当我提交时仍然会出现错误，提示axios未定义：

[Vue警告]: "click"事件处理程序中的错误: "ReferenceError: axios未定义"

这是新的laravel安装中随附的默认bootstrap.js文件，我只删除了jquery。

window._ = require('lodash');
window.Popper = require('popper.js').default;

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

这是我的app.js文件的外观：

import bootstrap from 'bootstrap';

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

Vue.component('form-component', require('./components/FormComponent.vue'));

const app = new Vue({
    el: '#app',

    data: {
        loading: true
    },

});

看起来就像这样，基本上我正在尝试使用axios发布数据：

<template>
    <v-container grid-list-xl>
        <v-flex>
            <v-text-field
                v-model="name"
                :error-messages="nameErrors"
                :counter="10"
                label="Name"
                required
                @input="$v.name.$touch()"
                @blur="$v.name.$touch()"
            ></v-text-field>
        </v-flex>
        <v-flex>
            <v-btn @click="submit">submit</v-btn>
            <v-btn @click="clear">clear</v-btn>        
        </v-flex>
    </v-container>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, maxLength, email } from 'vuelidate/lib/validators'

export default {
    mixins: [validationMixin],

    validations: {
        name: { required, maxLength: maxLength(20) }
    },

    data() {
        return {
            reactive: false,
            name: '',
        }
    },

    computed: {
        nameErrors () {
            const errors = [];
            if (!this.$v.name.$dirty) {
                return errors;
            } 
            !this.$v.name.maxLength && errors.push('Name must be at most 10 characters long');
            !this.$v.name.required && errors.push('Name is required.');
            return errors;
        },
    },

    methods: {
        submit () {
            this.$v.$touch(); 
            axios.post('event/store', {
                'name': this.name,
            })
            .then((response) => {
                console.log("success");
            })
            .catch((error) => {
                console.log("error");
            })
        },
        clear () {
            this.$v.$reset();
            this.name = '';
        }
    }

}
</script>

我正在加载axios，所以我不知道为什么会出现该错误。

- tigerel

Answer 1

如果您不想在每个使用它的组件中导入它，可以将它添加到Vue原型中：

window.axios = require('axios');

//... configure axios...

Vue.prototype.$http = window.axios;

然后在任何组件中，都可以使用如下：

this.$http.post('event/store', {
    'name': this.name,
})

- Jeff

---

仍然有可能以某种方式调用axios.post，而不是this.$http.post吗？ - tigerel

你可以使用 window.axios 而不仅仅是 axios，但这在 webpack 中并不是一个好的实践，因为理想情况下这些组件不应该依赖于自身之外的 window。这里的任何一个答案都可以，如果你想将其称为 this.axios 而不是 this.$http，你也可以这样做 @tigerel - Jeff

Answer 2

在组件中导入axios：

<script>
   import axios from 'axios'
   import { validationMixin } from 'vuelidate'
   ...
</script>

- Brian Lee

---

要么创建一个插件，要么查看@Jeff的答案。 - Brian Lee