如何放入axios request 2 参数答案

【问题标题】：How to put in Axios request 2 params如何放入axios request 2 参数
【发布时间】：2020-07-08 09:08:07
【问题描述】：

我尝试在 Laravel 上使用 Vue.Js（Vuex 也是）创建一个简单的 CRUD 应用程序在 Laravel 中创建资源控制器 UserController 我在这个控制器中的更新方法有问题此方法仅接受 PUT、PATCH HTTP 请求方法位置：app/Http/Controllers/Admin/UserController.php 看起来是这样的

public function update(Request $request, $id)
{

    return $request->all();

}

在我的 Vue 组件中，我尝试发送 2 个参数 ID 和 DATA 但是一直以来我都得到一个空数组这是我的 Vuex 文件位置：资源/js/components/admin/store/modules/user.js 这是Axios请求的代码：

async updateUserInfo(ctx, id, data)
{
    return new Promise((resolve, reject) => {
        axios({
            url: '/users/' + id,
            method: 'put',
            data: data,
            headers: {'Content-Type': 'multipart/form-data'},
        })
            .then((resp) => {
                console.log(resp)
                // ctx.commit('updateUser', resp.data.user)
                resolve(resp)
            })
            .catch((error) => {
                console.log(error)
                // ctx.commit('updateErrors', error.response.data.errors);
                reject(error)
            })
    })
},

这是我尝试调用此函数的 Vue 组件位置：资源/js/components/admin/views/components/user/EditComponent.vue 代码：

data()
    {
        return{
            formData: {
                address: '',
                birthday: '',
                email: '',
                name: '',
                password: '',
                passwordConfirmation: '',
                phone: '',
                surname: '',
            }
        }
    },

methods:{
        ...mapActions('user', ['editUserInfo', 'updateUserInfo']),

        async onClickUpdateInfo(id)
        {
            this.updateUserInfo(id, this.formData);
        }
    },

表单中我的提交按钮

<button @click.prevent="onClickUpdateInfo(id)" class="btn btn-success text-white">Обновить</button>[![enter image description here][1]][1]

【问题讨论】：

标签： laravel vue.js axios vuex

【解决方案1】：

您应该将 context 和 payload 传递给 Vuex 操作。所以我猜你无法访问你的操作中的表单数据，对吧？

试试这个：async updateUserInfo(ctx, { id, data })

然后在vue组件中：this.updateUserInfo({ id, data: this.formData });

【讨论】：

是的，你说得对，我尝试只发送 id，我有响应空数组我尝试只发送 formData，我有响应空数组