无法使用 Axios 在 Laravel Vue 中放置会话答案

【问题标题】：Unable to put session in Laravel Vue using Axios无法使用 Axios 在 Laravel Vue 中放置会话
【发布时间】：2023-04-04 13:56:01
【问题描述】：

我正在尝试创建一个端点并将数据发送到该端点并稍后在控制器方法中请求它。随着输入值的变化，它会触发 axios put 方法并将更新的perPage 数据传递给端点，我得到了成功的响应，控制台日志中的状态为 200，但该值没有在会议。我只是不知道我在这里错过了什么。请在这里放一些光。谢谢！

网络

Route::put('/set-per-page', [UserController::class, 'setPerPage'])->name('set.per_page');

控制器

public function setPerPage(Request $request)
{
    $request->session()->put('perPage', $request->perPage);
    return session('perPage');
}

组件

<template>
    <input-group inline>
        <input-select v-model="perPage" placeholder="Per Page">
            <option value="5">5</option>
            <option value="10">10</option>
        </input-select>
    </input-group>
</template>

<script>
    export default {
        props: {
            perPageData: {
                type: Number
            }
        },

        data() {
            return {
                perPage: this.perPageData
            }
        },

        watch: {
            perPage: {
                handler: function() {
                    axios.put(route('set.per_page', { per_page: this.per_page })).then((response)=>{ this.$inertia.reload({ only: ['usersData'] }), console.log(response) })
                }
            }
        }
    }
</script>

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

你确定$request->perPage 真的设置了吗？由于输入中没有name 属性（它不是POST 形式），因此可能需要通过$request->input('perPage') 访问perPage 属性。

【讨论】：

伙计，感谢回复，我已经发布了解决方案，以防将来有人卡在这里，如果你有时间请看看！无论如何谢谢：D
已更新 perPage 观察程序中包含的代码，以便在更新 perPage 值时仅重新加载 usersData 作为响应。

【解决方案2】：

实际的问题是，我们不能在public function __construct() 中使用sessions()，所以它无法从会话中获取值。根据当前的设置，解决了这个问题。

使用内联中间件，我们可以挂钩请求的路由，以便我们可以完全访问会话。

public function __construct()
{
    $this->middleware(function ($request, $next) {

        $this->perPage = session()->get('perPage', $this->perPage);

        return $next($request);
    });
}

【讨论】：