Tải khi hiển thị

Inertia hỗ trợ lazy-load dữ liệu khi cuộn bằng Intersection Observer API. Framework cung cấp component WhenVisible như một cách thuận tiện để tải dữ liệu khi một phần tử xuất hiện trong viewport. Component WhenVisible nhận prop data để chỉ định key của prop cần tải. Component cũng nhận prop fallback để chỉ định component được render trong lúc dữ liệu đang tải. WhenVisible nên bao bọc component phụ thuộc vào dữ liệu đó.

<script setup>
import { WhenVisible } from "@inertiajs/vue3";
</script>

<template>
  <WhenVisible data="permissions">
    <template #fallback>
      <div>Loading...</div>
    </template>

    <div v-for="permission in permissions">
      <!-- ... -->
    </div>
  </WhenVisible>
</template>

import { WhenVisible } from "@inertiajs/react";

export default () => (
  <WhenVisible data="permissions" fallback={() => <div>Loading...</div>}>
    <PermissionsChildComponent />
  </WhenVisible>
);

<script>
    import { WhenVisible } from '@inertiajs/svelte'

    let { permissions } = $props()
</script>

<WhenVisible data="permissions">
    {#snippet fallback()}
        <div>Loading...</div>
    {/snippet}

    {#each permissions as permission}
        <!-- ... -->
    {/each}
</WhenVisible>

Nếu muốn tải nhiều prop khi một phần tử trở nên hiển thị, bạn có thể truyền một mảng vào prop data.

<script setup>
import { WhenVisible } from "@inertiajs/vue3";
</script>

<template>
  <WhenVisible :data="['teams', 'users']">
    <template #fallback>
      <div>Loading...</div>
    </template>

    <!-- Props are now loaded -->
  </WhenVisible>
</template>

import { WhenVisible } from "@inertiajs/react";

export default () => (
  <WhenVisible data={["teams", "users"]} fallback={() => <div>Loading...</div>}>
    <ChildComponent />
  </WhenVisible>
);

<script>
    import { WhenVisible } from '@inertiajs/svelte'

    let { teams, users } = $props()
</script>

<WhenVisible data={['teams', 'users']}>
    {#snippet fallback()}
        <div>Loading...</div>
    {/snippet}

    <!-- Props are now loaded -->
</WhenVisible>

Tải trước khi phần tử hiển thị

Nếu muốn bắt đầu tải dữ liệu trước khi phần tử thực sự hiển thị, bạn có thể truyền giá trị cho prop buffer. Giá trị buffer là số pixel tính từ thời điểm trước khi phần tử đi vào viewport.

<script setup>
import { WhenVisible } from "@inertiajs/vue3";
</script>

<template>
  <WhenVisible data="permissions" :buffer="500">
    <template #fallback>
      <div>Loading...</div>
    </template>

    <div v-for="permission in permissions">
      <!-- ... -->
    </div>
  </WhenVisible>
</template>

import { WhenVisible } from "@inertiajs/react";

export default () => (
  <WhenVisible
    data="permissions"
    buffer={500}
    fallback={() => <div>Loading...</div>}
  >
    <PermissionsChildComponent />
  </WhenVisible>
);

<script>
    import { WhenVisible } from '@inertiajs/svelte'

    let { permissions } = $props()
</script>

<WhenVisible data="permissions" buffer={500}>
    {#snippet fallback()}
        <div>Loading...</div>
    {/snippet}

    {#each permissions as permission}
        <!-- ... -->
    {/each}
</WhenVisible>

Trong ví dụ trên, dữ liệu sẽ bắt đầu được tải khi phần tử còn cách thời điểm hiển thị 500 pixel. Mặc định, component WhenVisible bao bọc fallback template bằng phần tử div để có thể xác định phần tử có hiển thị trong viewport hay không. Nếu muốn tùy chỉnh phần tử bao bọc, hãy truyền prop as.

<script setup>
import { WhenVisible } from "@inertiajs/vue3";
</script>

<template>
  <WhenVisible data="products" as="span">
    <!-- ... -->
  </WhenVisible>
</template>

import { WhenVisible } from "@inertiajs/react";

export default () => (
  <WhenVisible data="products" as="span">
    <ProductsChildComponent />
  </WhenVisible>
);

<script>
    import { WhenVisible } from '@inertiajs/svelte'

    let { products } = $props()
</script>

<WhenVisible data="products" as="span">
    <!-- ... -->
</WhenVisible>

Luôn kích hoạt

Mặc định, component WhenVisible chỉ kích hoạt một lần khi element trở nên hiển thị. Nếu muốn luôn kích hoạt tải dữ liệu khi element hiển thị, bạn có thể truyền prop always. Điều này hữu ích khi muốn tải dữ liệu mỗi lần element hiển thị, chẳng hạn element ở cuối infinite scroll list và bạn muốn tải thêm. Ngoài ra có thể dùng component Infinite scroll, vốn xử lý sẵn trường hợp này. Lưu ý rằng nếu request tải dữ liệu vẫn đang được xử lý, component sẽ đợi request đó hoàn tất rồi mới bắt đầu request tiếp theo nếu phần tử vẫn còn hiển thị trong viewport.

<script setup>
import { WhenVisible } from "@inertiajs/vue3";
</script>

<template>
  <WhenVisible data="products" always>
    <!-- ... -->
  </WhenVisible>
</template>

import { WhenVisible } from "@inertiajs/react";

export default () => (
  <WhenVisible data="products" always>
    <ProductsChildComponent />
  </WhenVisible>
);

<script>
    import { WhenVisible } from '@inertiajs/svelte'

    let { products } = $props()
</script>

<WhenVisible data="products" always>
    <!-- ... -->
</WhenVisible>

Trạng thái fetching

Component WhenVisible cung cấp slot prop fetching để bạn hiển thị chỉ báo đang tải trong các request tiếp theo. Điều này hữu ích vì fallback chỉ được hiển thị ở lần tải đầu tiên, còn fetching cho phép cho biết dữ liệu đang được làm mới ở những lần tải sau.

<script setup>
import { WhenVisible } from "@inertiajs/vue3";
</script>

<template>
  <WhenVisible data="permissions" always>
    <template #default="{ fetching }">
      <PermissionsChildComponent />
      <div v-if="fetching">Refreshing...</div>
    </template>

    <template #fallback>
      <div>Loading...</div>
    </template>
  </WhenVisible>
</template>

import { WhenVisible } from "@inertiajs/react";

export default () => (
  <WhenVisible data="permissions" always fallback={() => <div>Loading...</div>}>
    {({ fetching }) => (
      <>
        <PermissionsChildComponent />
        {fetching && <div>Refreshing...</div>}
      </>
    )}
  </WhenVisible>
);

<script>
    import { WhenVisible } from '@inertiajs/svelte'

    let { permissions } = $props()
</script>

<WhenVisible data="permissions" always>
    {#snippet children({ fetching })}
        <PermissionsChildComponent />
        {#if fetching}
            <div>Refreshing...</div>
        {/if}
    {/snippet}

    {#snippet fallback()}
        <div>Loading...</div>
    {/snippet}
</WhenVisible>

Giữ lỗi

Component WhenVisible mặc định đặt preserveErrors: true, đảm bảo validation error không bị xóa khi nó kích hoạt reload. Bạn có thể override qua prop params.

<WhenVisible data="comments" :params="{ preserveErrors: false }">
    <!-- ... -->
</WhenVisible>

<WhenVisible data="comments" params={{ preserveErrors: false }}>
    {/* ... */}
</WhenVisible>

<WhenVisible data="comments" params={{ preserveErrors: false }}>
    <!-- ... -->
</WhenVisible>

Gửi form

Khi gửi form, bạn có thể muốn dùng tùy chọn except để loại trừ các prop đang được component WhenVisible sử dụng. Cách này tránh việc các prop bị tải lại khi bạn được redirect trở về trang hiện tại do lỗi validation.

<script setup>
import { useForm, WhenVisible } from "@inertiajs/vue3";

const form = useForm({
  name: "",
  email: "",
});

function submit() {
  form.post("/users", {
    except: ["permissions"],
  });
}
</script>

<template>
  <form @submit.prevent="submit">
    <!-- ... -->
  </form>

  <WhenVisible data="permissions">
    <!-- ... -->
  </WhenVisible>
</template>

import { useForm, WhenVisible } from "@inertiajs/react";

export default function CreateUser() {
  const { data, setData, post } = useForm({
    name: "",
    email: "",
  });

  function submit(e) {
    e.preventDefault();
    post("/users", {
      except: ["permissions"],
    });
  }

  return (
    <>
      <form onSubmit={submit}>{/* ... */}</form>

      <WhenVisible data="permissions">{/* ... */}</WhenVisible>
    </>
  );
}

<script>
    import { useForm, WhenVisible } from '@inertiajs/svelte'

    const form = useForm({
        name: '',
        email: '',
    })

    function submit() {
        form.post('/users', {
            except: ['permissions'],
        })
    }
</script>

<form onsubmit={submit}>
    <!-- ... -->
</form>

<WhenVisible data="permissions">
    <!-- ... -->
</WhenVisible>

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.

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ải trước khi phần tử hiển thị

Luôn kích hoạt

Trạng thái fetching

Giữ lỗi

Gửi form

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

​Tải trước khi phần tử hiển thị

​Luôn kích hoạt

​Trạng thái fetching

​Giữ lỗi

​Gửi form

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

Tải trước khi phần tử hiển thị

Luôn kích hoạt

Trạng thái fetching

Giữ lỗi

Gửi form

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