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

1. Initialization: On mount, the component checks if the data for the current hash is loaded. If not, it calls loadData.
2. 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>.
3. 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.
4. Cleanup: onBeforeUnmount, the loaded state is reset to false.