当您访问您已经所在的页面时,并不总是需要从服务器重新获取所有页面的数据。实际上,如果某些页面数据变得陈旧是可以接受的,那么只选择一部分数据可以成为有用的性能优化。Inertia 通过其“部分重新加载”功能使这成为可能。
例如,考虑一个包含用户列表以及按公司过滤用户的选项的“用户索引”页面。在第一次请求页面时,users
和 companies
道具都传递给页面组件。但是,在随后访问同一页面(可能是为了过滤用户)时,您只需从服务器请求 users
数据,而无需请求 companies
数据。Inertia 然后会自动将从服务器返回的部分数据与它已经在客户端内存中拥有的数据合并。
要执行部分重新加载,请使用 only
访问选项来指定服务器应该返回哪些数据。此选项应该是一个键数组,对应于道具的键。
import { router } from '@inertiajs/vue3'
router.visit(url, {
only: ['users'],
})
除了 only
访问选项之外,您还可以使用 except
选项来指定服务器应该排除哪些数据。此选项也应该是一个键数组,对应于道具的键。
import { router } from '@inertiajs/vue3'
router.visit(url, {
except: ['users'],
})
由于部分重新加载只能对用户已经所在的同一页面组件进行,因此几乎总是很有意义地只使用 router.reload()
方法,该方法会自动使用当前 URL。
import { router } from '@inertiajs/vue3'
router.reload({ only: ['users'] })
也可以使用 Inertia 链接使用 only
属性执行部分重新加载。
import { Link } from '@inertiajs/vue3'
<Link href="/users?active=true" :only="['users']">Show active</Link>
为了使部分重新加载最有效,请确保在从服务器端路由或控制器返回道具时也使用延迟数据评估。这可以通过将所有可选页面数据包装在闭包中来实现。
return Inertia::render('Users/Index', [
'users' => fn () => User::all(),
'companies' => fn () => Company::all(),
]);
当 Inertia 执行请求时,它将确定需要哪些数据,然后才会评估闭包。这可以显着提高包含大量可选数据的页面的性能。
此外,Inertia 提供了一个 Inertia::lazy()
方法来指定除非使用 only
选项明确请求,否则永远不会包含道具。
return Inertia::render('Users/Index', [
'users' => Inertia::lazy(fn () => User::all()),
]);
相反,您可以使用 Inertia::always()
方法来指定即使在部分重新加载中没有明确要求,也应该始终包含道具。
return Inertia::render('Users/Index', [
'users' => Inertia::always(User::all()),
]);
以下是每种方法的总结
return Inertia::render('Users/Index', [
// ALWAYS included on standard visits
// OPTIONALLY included on partial reloads
// ALWAYS evaluated
'users' => User::all(),
// ALWAYS included on standard visits
// OPTIONALLY included on partial reloads
// ONLY evaluated when needed
'users' => fn () => User::all(),
// NEVER included on standard visits
// OPTIONALLY included on partial reloads
// ONLY evaluated when needed
'users' => Inertia::lazy(fn () => User::all()),
// ALWAYS included on standard visits
// ALWAYS included on partial reloads
// ALWAYS evaluated
'users' => Inertia::always(User::all()),
]);