vue-use-async-state

Composable for encapsulating and tracking statuses of asynchronous operations. It can store and manage the statuses of multiple parallel operations independently.

It helps you manage the state of asynchronous operations by associating each operation with a specific name. You can track when the operation is idle or pending.

Basic usage

In a Store or Component Setup:

import { useAsyncState } from 'vue-use-async-state';

const { withAsyncState, isPending } = useAsyncState<
  'fetchA'
  | 'updateA'
  // Any operation names as needed...
>();

const fetchA = withAsyncState(async () => {
  // Your asynchronous operation...
  // ...
}, 'fetchA');

// any other operations...
// ...

Handling operation status in Components:

  onMounted(() => {
    fetchA();
  });

  function render() {
    if (isPending('fetchA')) {
      return <MySpinner />;
    }
    else {
      // render A...
    }
  }

API

• withAsyncState(action: Function, operationName?: string, pendingSlowDownMs?: number): Function

  Wraps an asynchronous action and tracks its state. You can optionally provide a pendingSlowDownMs to delay the removal of the PENDING status for smoother UI transitions.

  • action: The asynchronous function to be wrapped.
  • operationName: A string identifier for the operation.
  • pendingSlowDownMs: Optional delay in milliseconds to avoid "flashing" loading indicators.

• isIdle(operationName?: string): boolean

  Returns true if the specified operation is idle (i.e., no pending actions), or if the operation name is not provided, it checks the default operation.

• isPending(operationName?: string): boolean

  Returns true if the specified operation is pending.

• setIsPending(pending: boolean, operationName?: string)

  Manually sets the PENDING status for an operation.

• reset()

  Resets all operation statuses to idle.

Features

• Tracks multiple named operations.
• Handles pending and idle states with simple API methods.
• Prevents flashing spinners with optional artificial delay.
• Easily integrates with Vue components or stores.