Skip to main content
Inertia ghi đè prop cùng tên khi reload page. Tuy nhiên đôi khi bạn cần merge dữ liệu mới với dữ liệu hiện có, ví dụ nút “tải thêm” cho kết quả phân trang. Component Infinite scroll dùng prop merging ở bên dưới. Prop merging chỉ hoạt động trong partial reload. Full-page visit luôn thay toàn bộ prop kể cả khi đã đánh dấu merge.

Các phương thức gộp

Để gộp một prop thay vì ghi đè, bạn có thể dùng phương thức Inertia::merge() khi trả response.
Phương thức Inertia::merge() sẽ nối các phần tử mới vào cuối mảng hiện có ở cấp root. Bạn có thể đổi hành vi này để chèn các phần tử vào đầu mảng.
Để kiểm soát chính xác hơn, bạn có thể chỉ định các thuộc tính lồng nhau cụ thể cần gộp trong khi phần còn lại của object vẫn được thay thế.
Bạn có thể kết hợp nhiều thao tác và nhắm đến nhiều thuộc tính cùng lúc.
Ở phía client, Inertia tự động xử lý toàn bộ quá trình gộp theo cấu hình phía máy chủ của bạn.

Khớp các phần tử

Khi gộp mảng, bạn có thể dùng tham số matchOn để khớp các phần tử hiện có theo một field cụ thể và cập nhật chúng thay vì nối thêm phần tử mới.
Trong ví dụ đầu tiên, Inertia sẽ duyệt mảng data và cố gắng khớp từng phần tử theo field id. Nếu tìm thấy phần tử khớp, phần tử hiện có sẽ được thay thế. Nếu không tìm thấy, phần tử mới sẽ được nối vào cuối.

Deep merge

Thay vì chỉ định path lồng nhau cần merge, bạn có thể dùng Inertia::deepMerge() để deep merge toàn bộ cấu trúc.
Inertia::deepMerge() được giới thiệu trước khi Inertia::merge() hỗ trợ prepend và nhắm đến các path lồng nhau. Trong hầu hết trường hợp, Inertia::merge() cùng các phương thức append và prepend là đủ.

Client-side visits

Bạn cũng có thể merge prop trực tiếp phía client mà không gửi server request bằng client side visits. Inertia cung cấp prop helper methods để append, prepend hoặc thay prop value.

Kết hợp với deferred props

Bạn có thể kết hợp deferred props với mergeable props để trì hoãn tải prop và cuối cùng đánh dấu nó mergeable sau khi tải.

Kết hợp với Once Props

Bạn có thể nối modifier once() vào merge prop để đảm bảo dữ liệu chỉ được resolve một lần và được phía client ghi nhớ qua các lần điều hướng tiếp theo.
Để biết thêm về once props, xem tài liệu once props.

Reset props

Ở phía client, bạn có thể cho server biết rằng mình muốn reset một prop. Điều này hữu ích khi cần xóa giá trị prop trước khi gộp dữ liệu mới, chẳng hạn khi người dùng nhập truy vấn tìm kiếm mới trên một danh sách phân trang. Tùy chọn request reset nhận mảng key prop cần reset.

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 v3 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.