Skip to main content
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.

Tạo response

Tạo response Inertia rất đơn giản. Hãy gọi phương thức Inertia::render() trong controller hoặc route, truyền tên page component JavaScript cần render cùng các property (dữ liệu) dành cho trang. Trong ví dụ bên dưới, chúng ta truyền một property duy nhất (event) chứa bốn attribute (id, title, start_datedescription) cho page component Event/Show.
Để đảm bảo trang tải nhanh, chỉ trả về lượng dữ liệu tối thiểu mà trang cần.
Hãy nhớ rằng mọi dữ liệu controller trả về đều có thể nhìn thấy ở phía client, vì vậy phải loại bỏ thông tin nhạy cảm.

Property

Để truyền dữ liệu từ máy chủ vào page component, bạn có thể dùng property. Props có thể nhận nhiều loại giá trị, gồm primitive, array, object và một số kiểu riêng của Laravel được tự động resolve:
Các object Arrayable như Eloquent model và collection tự động được chuyển đổi qua phương thức toArray(). Các object Responsable như API resource và JSON response được resolve qua phương thức toResponse().

Interface ProvidesInertiaProperty

Khi truyền props vào component, đôi khi bạn muốn tạo custom class có khả năng tự chuyển đổi sang định dạng dữ liệu thích hợp. Trong khi interface Arrayable của Laravel chỉ chuyển object thành array, Inertia cung cấp interface ProvidesInertiaProperty mạnh hơn với khả năng transform theo context. Interface này yêu cầu method toInertiaProperty, nhận object PropertyContext chứa property key ($context->key), toàn bộ props của trang ($context->props) và request instance ($context->request).
Sau khi định nghĩa, bạn có thể dùng class này trực tiếp làm giá trị prop.
PropertyContext cho phép truy cập property key, qua đó hỗ trợ các pattern mạnh như merge với dữ liệu dùng chung.

Interface ProvidesInertiaProperties

Trong một số tình huống, bạn muốn gom các prop liên quan lại để tái sử dụng trên nhiều trang. Bạn có thể làm điều đó bằng cách implement interface ProvidesInertiaProperties. Interface này yêu cầu method toInertiaProperties trả về array các cặp key-value. Method nhận object RenderContext chứa tên component ($context->component) và request instance ($context->request).
Bạn có thể dùng trực tiếp các prop class này trong method render()with().
Bạn cũng có thể kết hợp nhiều prop class với các prop khác trong một array:

Dữ liệu root template

Có những trường hợp bạn muốn truy cập dữ liệu prop trong root Blade template của ứng dụng. Ví dụ, bạn có thể muốn thêm meta description, Twitter Card meta tag hoặc Facebook Open Graph meta tag. Bạn có thể truy cập dữ liệu này qua biến $page.
Đôi khi bạn muốn cung cấp dữ liệu cho root template nhưng không gửi dữ liệu đó đến page component JavaScript. Có thể thực hiện bằng method withViewData.
Sau khi gọi withViewData, bạn có thể truy cập dữ liệu đã định nghĩa như cách truy cập biến Blade template thông thường.

Kích thước response tối đa

Để hỗ trợ điều hướng history phía client, tất cả response Inertia từ máy chủ được lưu trong history state của trình duyệt. Tuy nhiên, hãy lưu ý một số trình duyệt giới hạn lượng dữ liệu có thể lưu trong history state. Ví dụ, Firefox giới hạn 16 MiB và ném lỗi NS_ERROR_ILLEGAL_VALUE nếu vượt quá giới hạn. Thông thường con số này lớn hơn rất nhiều so với lượng dữ liệu thực tế bạn cần trong ứng dụng.

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.