Laravel Vue Axios 未定义

Posted 2023-02-23

【中文标题】Laravel Vue Axios 未定义

【英文标题】：Laravel Vue Axios is not defined

【发布时间】：2019-01-01 13:37:18

【问题描述】：

我在我的 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
    ,

);

FormComponent 看起来是这样的，基本上我是在尝试使用 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，所以我不知道为什么会出现这个错误。

【参考方案1】：

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

window.axios = require('axios');

//... configure axios...

Vue.prototype.$http = window.axios;

然后在任何组件中你都可以使用

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

【讨论】：

是否还有可能以某种方式调用 axios.post 而不是 this.$http.post ...？

你可能可以使用window.axios 而不仅仅是axios，但这对于 webpack 来说不是一个好的做法，因为理想情况下这些组件不依赖于它们自身之外的窗口。这里的任何一个答案都可以，如果你想称之为this.axios 而不是this.$http 你可以这样做@tigerel

【参考方案2】：

在组件中导入axios：

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

【讨论】：

要么创建一个插件，要么查看@Jeff 的回答。