DataLoader Component

简体中文

A generic Vue 3 component designed to simplify asynchronous data loading scenarios. It handles the loading state, error presentation, data filtering, and automatic reloading based on hash changes.

Features

Automatic Data Loading: Triggers the loadData function automatically when the component mounts or when the hash prop changes.
Error Handling: Captures exceptions during data loading and displays an error alert (using <a-alert>).
Data Filtering: Supports an optional filter function to process the loaded data before rendering.
State Management: Manages internal loaded and data states, while allowing external control via props.
Scoped Slots: Exposes the loaded data, filtered data, loading status, and reload trigger to the parent component via scoped slots.
Dependency Injection: Provides the reload method to descendant components via provide/inject.

Props

Prop	Type	Required	Default	Description
`hash`	Any	Yes	-	A unique identifier or version hash for the data state. If `hash` changes (and does not match the loaded state), a reload is triggered.
`loadData`	Function	Yes	-	An asynchronous function that fetches and returns the data.
`loadDataArgs`	Any	No	`undefined`	Arguments to be passed to the `loadData` function.
`loaded`	Any	No	`undefined`	Optional external loaded state. The component checks if `loaded === hash` to determine if data is fresh.
`reload`	Function	No	`undefined`	Optional external function to update the loaded state. If provided, it is used instead of the internal state mutation.
`filter`	Function	No	`undefined`	A function that takes the raw `data` and returns processed/filtered data.

Events

Event	Payload	Description
`loaded`	`(data, hash, filteredData)`	Emitted when data is successfully loaded.

Slots

Default Slot

The component renders its default slot content when no error has occurred.

Slot Props:

Prop	Type	Description
`data`	Any	The raw data returned by `loadData`.
`filteredData`	Any	The result of applying the `filter` prop to `data`. If no filter is provided, it equals `data`.
`loaded`	Boolean	Indicates if the current data corresponds to the provided `hash`.
`reload`	Function	A function to manually trigger a reload or update the loaded state. Accepts a boolean or hash value (default `false`).

Dependencies

Ant Design Vue: The component uses <a-alert> to display error messages. Ensure Ant Design Vue is installed and configured in your project.

Usage Example

<template>
  <DataLoader
    :hash="params.page"
    :load-data="fetchItems"
    :load-data-args="{ category: 'books' }"
    :filter="itemFilter"
    @loaded="handleLoaded"
  >
    <template #default="{ filteredData, reload }">
      <!-- Custom Loading Indicator if needed, though DataLoader handles logic -->
      <div v-if="!filteredData">Loading...</div>
      
      <div v-else>
        <ul>
          <li v-for="item in filteredData" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
        <button @click="reload(false)">Force Reload</button>
      </div>
    </template>
  </DataLoader>
</template>

<script setup>
import { ref } from 'vue';
import DataLoader from './DataLoader.vue';

const params = ref({ page: 1 });

// Async data fetching function
const fetchItems = async (args) => {
  const response = await fetch(`/api/items?category=${args.category}`);
  if (!response.ok) throw new Error('Network response was not ok');
  return response.json();
};

// Optional filter function
const itemFilter = (data) => {
  return data.filter(item => item.active);
};

const handleLoaded = (data, hash, filtered) => {
  console.log('Data loaded for hash:', hash);
};
</script>

Logic Details

Initialization: On mount, the component checks if the data for the current hash is loaded. If not, it calls loadData.
Data Loading:
- loadData is called with loadDataArgs.
- On success: data is updated, internal/external loaded state is set to hash, and the loaded event is emitted.
- On failure: error state is set, displaying the <a-alert>.
Reactivity:
- The dataLoaded computed property monitors props.hash vs loaded state. If they mismatch, it triggers loadData on the next tick.
- This allows the component to automatically refetch when hash changes.
Cleanup: onBeforeUnmount, the loaded state is reset to false.

lchrennew/data-loader-vue3

README