Javascript 如何使用惯性Vue更新Laravel会话数据？

我最近从Laravel Livewire迁移到Laravel Inertia Vue。在使用Livewire的过程中，我创建了一个名为

的trait，使用perpagePagination

创建了一个公共变量

perPage

，默认值为

10

，并将该值装载到会话

$this->perPage=session（）->get（'perPage'，$this->perPage'）。然后在lifecycle hook的帮助下，创建了一个函数方法
updatedPerPage（$value）
现在每当
perPage
变量被更新时，该值将使用
session（）->put（'perPage'，$value）传递到会话中
然后最后将分页应用于查询
return$query->paginate（$this->perPage）。每个页面的
perPage
变量通过导线建模到刀片前端的select输入

具有分页特性

trait WithPerPagePagination
{
    use WithPagination;

    public $perPage = 10;

    public function mountWithPerPagePagination()
    {
        $this->perPage = session()->get('perPage', $this->perPage);
    }

    public function updatedPerPage($value)
    {
        session()->put('perPage', $value);
    }

    public function applyPagination($query)
    {
        return $query->paginate($this->perPage);
    }
}

现在，在惯性Vue的情况下，我如何将更新后的
peru_page
值从前端放入会话中，并获得上述行为。现在，对于惯性Vue应用程序，我已经在索引方法中定义了一个
per_page
变量，
$request->has（'per_page'）$请求->每页：5
并在查询中使用它，如
paginate（$per_page）
中所示，并将其作为道具传递到前端。稍后在前端，使用类型
编号
初始化prop
per_page
，并创建和返回数据，
paginate:{per_page:this.per_page}
，然后创建一个方法
initPerPage（）
返回
this.$indivity.replace（路由（'users.index'，{per_page:this.paginate.per_page}））
。最后，v-modeling到
paginate.per_page
，如果有更改，则运行
initPerPage
。此方法将路由的url替换为所选的所需
每页
值

用户控制器

public function index(Request $request)
{
    $per_page = $request->has('per_page') ? $request->per_page : 5;
    $users =  User::query()
                ->select('id', 'name', 'email', 'role_id', 'created_at')
                ->when($request->search, fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'))
                ->paginate($per_page)
                ->withQueryString();

    return Inertia::render('Backend/Management/AudienceManagement/Users/Index', [
        'per_page' => $per_page,
        'users' => $users
    ]);
}

用户索引Vue

<template>
    <input-group inline>
        <input-select v-model="paginate.per_page" @change="initPerPage" placeholder="Per Page">
            <option value="5">5</option>
            <option value="10">10</option>
        </input-select>
    </input-group>
</template>

<script>
    import InputGroup from '@/Components/Custom/Input/Group'
    import InputSelect from '@/Components/Custom/Input/Select'

    export default {
        components: {
            InputGroup,
            InputSelect
        },
        props : {
            per_page: {
                type: Number
            }
        },
        data() {
            return {
                paginate: {
                    per_page: this.per_page
                }
            }
        },
        methods: {
            initPerPage() {
                this.$inertia.replace(route('users.index', { per_page: this.paginate.per_page }))
            }
        }
    }
</script>


5.
10
从“@/Components/Custom/Input/Group”导入InputGroup
从“@/Components/Custom/Input/Select”导入InputSelect
导出默认值{
组成部分：{
输入组，
输入选择
},
道具：{
每页：{
类型：编号
}
},
数据（）{
返回{
分页：{
每页：此。每页
}
}
},
方法：{
initPerPage（）{
this.$inderty.replace（路由（'users.index'，{per_page:this.paginate.per_page}））
}
}
}

现在，使用我当前的惯性Vue方法，只要用户更改
每页
选择输入，所选值将与参数
每页=值
一起添加到url，这使其工作，但是每当我刷新页面时，
每页
值不会存储到会话中，或者重定向回页面，则每个页面的
值将返回默认值。请在这里帮助我创建与Livewire中相同的行为。谢谢你抽出时间