This Vue 3 plugin allows you to create computed properties that are computed asynchronously.
import * as Vue from 'vue'; import * as AsyncComputed from 'vue3-async-computed'; const asyncComputed = AsyncComputed.createPlugin({ ref: Vue.ref }); Vue.createApp({ data() { return { userID: 1, } }, }).use(asyncComputed, { async profile(result) { result.value = `loading profile for user ${this.userID}...`; const response = await fetch(`https://httpbin.org/get?userID=${this.userID}`); const data = await response.json(); result.value = data; }, }).mount('#app');
And then, in HTML:
<div>{{ userID }}: {{ profile }}</div>
Install using npm install vue3-async-computed
- Basic example, the app displays price information for any selected crypto currency: JSFiddle
Describe how to approach manual re-calculation of the async computed properties. Provide an example.