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