Once Props

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Một số dữ liệu hiếm khi thay đổi, tốn chi phí tính toán hoặc đơn giản là rất lớn. Thay vì gửi dữ liệu này trong mọi response, bạn có thể dùng once props. Các prop này được client ghi nhớ và tái sử dụng trên các trang tiếp theo có cùng prop, đặc biệt phù hợp với dữ liệu dùng chung.

Tạo once props

Để tạo once prop, dùng method Inertia::once() khi trả response. Method nhận callback trả về dữ liệu prop.

return Inertia::render('Billing', [
    'plans' => Inertia::once(fn () => Plan::all()),
]);

Sau khi client nhận prop này, các request tiếp theo sẽ bỏ qua việc resolve callback và loại prop khỏi response. Client chỉ ghi nhớ once props khi điều hướng giữa các trang có chứa chúng. Điều hướng đến trang không có once prop sẽ làm quên giá trị đã nhớ; prop sẽ được resolve lại ở trang kế tiếp có nó. Trong thực tế, đây hiếm khi là vấn đề vì once props thường được dùng làm dữ liệu dùng chung hoặc trong một khu vực cụ thể của ứng dụng.

Buộc refresh

Bạn có thể buộc once prop refresh bằng method fresh().

return Inertia::render('Billing', [
    'plans' => Inertia::once(fn () => Plan::all())->fresh(),
]);

Method này cũng nhận boolean, cho phép refresh prop có điều kiện.

return Inertia::render('Billing', [
    'plans' => Inertia::once(fn () => Plan::all())->fresh($condition),
]);

Refresh từ client

Bạn có thể refresh once prop từ phía client bằng partial reload. Máy chủ luôn resolve once prop khi prop được yêu cầu rõ ràng.

import { router } from '@inertiajs/vue3'

router.reload({ only: ['plans'] })

import { router } from '@inertiajs/react'

router.reload({ only: ['plans'] })

import { router } from '@inertiajs/svelte'

router.reload({ only: ['plans'] })

Thời gian hết hạn

Bạn có thể đặt thời gian hết hạn bằng method until(). Method nhận DateTimeInterface, DateInterval hoặc integer (giây). Prop sẽ được refresh trong một visit tiếp theo sau khi thời gian hết hạn đã qua.

return Inertia::render('Dashboard', [
    'rates' => Inertia::once(fn () => ExchangeRate::all())->until(now()->addDay()),
]);

Custom key

Bạn có thể gán custom key cho prop bằng method as(). Điều này hữu ích khi muốn chia sẻ dữ liệu qua nhiều trang nhưng dùng tên prop khác nhau.

// Team member list...
return Inertia::render('Team/Index', [
    'memberRoles' => Inertia::once(fn () => Role::all())->as('roles'),
]);

// Invite form...
return Inertia::render('Team/Invite', [
    'availableRoles' => Inertia::once(fn () => Role::all())->as('roles'),
]);

Cả hai trang chia sẻ cùng dữ liệu bên dưới vì dùng chung custom key, vì vậy prop chỉ được resolve cho trang bạn truy cập đầu tiên.

Chia sẻ once props

Bạn có thể chia sẻ once props toàn cục bằng method Inertia::share().

Inertia::share('countries', Inertia::once(fn () => Country::all()));

Hoặc để thuận tiện, dùng method shareOnce().

Inertia::shareOnce('countries', fn () => Country::all());

Bạn cũng có thể chain as(), fresh() và until() vào method shareOnce.

Inertia::shareOnce('countries', fn () => Country::all())->until(now()->addDay());

Ngoài ra, bạn có thể định nghĩa method shareOnce() chuyên biệt trong middleware. Middleware sẽ evaluate cả share() và shareOnce(), sau đó merge kết quả.

class HandleInertiaRequests extends Middleware
{
    public function shareOnce(Request $request): array
    {
        return array_merge(parent::shareOnce($request), [
            'countries' => fn () => Country::all(),
        ]);
    }
}

Prefetch

Once props tương thích với prefetch. Client tự động đưa mọi once prop đã ghi nhớ vào response prefetch, vì vậy khi điều hướng đến trang đã prefetch, once props đã có sẵn. Trang prefetch chứa once prop đã hết hạn sẽ bị invalid khỏi cache.

Kết hợp với loại prop khác

Modifier once() có thể chain vào prop deferred, merge và optional.

return Inertia::render('Dashboard', [
    'permissions' => Inertia::defer(fn () => Permission::all())->once(),
    'activity' => Inertia::merge(fn () => $user->recentActivity())->once(),
    'categories' => Inertia::optional(fn () => Category::all())->once(),
]);

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v2 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Tạo once props

Buộc refresh

Refresh từ client

Thời gian hết hạn

Custom key

Chia sẻ once props

Prefetch

Kết hợp với loại prop khác

Tài liệu chính thức

​Tạo once props

​Buộc refresh

​Refresh từ client

​Thời gian hết hạn

​Custom key

​Chia sẻ once props

​Prefetch

​Kết hợp với loại prop khác

​Tài liệu chính thức

Tạo once props

Buộc refresh

Refresh từ client

Thời gian hết hạn

Custom key

Chia sẻ once props

Prefetch

Kết hợp với loại prop khác

Tài liệu chính thức