部分重新載入

當訪問您已在的同一頁面時，不一定需要從伺服器重新獲取所有頁面數據。事實上，如果可以接受某些頁面數據過時，則僅選擇數據的子集可能是一個有用的性能優化。 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()),
]);