使用 Inertia 传入惰性加载参数：指南

vue.js

2024-03-10 23:49:31

使用 Inertia 惰性加载传入参数

引言

在构建单页面应用时，需要在保持高性能的同时动态加载数据。Inertia.js 提供了一种惰性加载机制，可以轻松高效地从后端加载数据。有时，需要向惰性加载请求传递参数，本文将探索如何实现这一目标。

场景概述

假设我们在管理机器的页面上显示产品列表。最初加载时，我们展示了所有产品。然而，我们还希望根据外键部分动态加载缺失的产品。为此，我们从控制器返回两个属性：“产品”和惰性加载的“已加载产品”。

后端实现

在后端控制器中，使用 Inertia::lazy 回调定义惰性加载的“已加载产品”属性，并提供一个签名以接收参数。

return Inertia::render('User/ManageMachine', [
    'products' => $products,
    'loadedProducts' => Inertia::lazy(fn ($propertyId) => StorageProperty::find($propertyId)->products()->toArray()),
]);

前端处理

在前端组件中，我们需要传递属性 ID 作为参数。我们可以使用 usePage 钩子函数从组件中获取属性，如下所示：

<script setup>
import { router, usePage } from '@inertiajs/vue3';
const fetchProducts = (propertyId) => {
    const { propertyId } = usePage().props
    router.reload( { 
        only: [ loadedProducts],
        preserveState: true,
        data: {
          propertyId
        },
    });
</script>