Vue-recomputed-async NPM

vue-recomputed-async

Vue.js extended computed composable with async, initial state & manual refresh support this library aims to provide better code integration by providing a single function that eliminate the need to create and call a fetch function, creating a sperate loading & data objects manually handling the fetch function errors, lazy evualation, providing an initial default state in case of in progress evaluation or failure

Comparison with regular `computed()` & `vueuse` `computedAsync()`:

Feature	`computed()`	`computedAsync()`	`recomputedAsync()`
Dependency Tracking & Reactivity	✅	✅	✅
Async Support	❌	✅	✅
Initial State	❌	✅	✅
Lazy Evaluation	❌	✅	✅
Evaulation State	❌	✅	✅
Manual Re-evaluation	❌	❌	✅

Use cases:

providing initial data state, while fetching data from API
ability to refresh the data that might be changed without being tied to any dependecy a normal computed would not be able to react to

Install

npm i vue-recomputed-async

Example Usage:

<template>
    <div>
        <div v-if="peopleLoading">Loading People...</div>
        <div v-for="person in people" :key="person.name">
            {{ person.name }}
        </div>
        <button @click="refreshPeople">Refresh</button>
    </div>
</template>

<script setup>
import { recomputedAsync } from 'vue-recomputed-async';
import { getPeople } from './people-api'

const {
    data: people,
    loading: peopleLoading,
    refresh: refreshPeople,
} = recomputedAsync(async () => {
    return await getPeople()
}, [])
</script>

The `options` parameter:

Since this package is an extension that uses computedAsync composable from @vueuse/core package the hood, you can override the options

Return object:

Field	Description
`refresh()`	a function that rexecute the evaluation callback function to refresh the computed value
`data`	a reactive object that holds the the value returned the callback function, if the callback failed or still evaluation, it holds the initial value provided
`loading`	returns `true` if the callback function is still evaluating