src/composable/computedRefreshable.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { computedAsync, watchThrottled } from '@vueuse/core';
import { computed, ref, watch } from 'vue';

export { computedRefreshable, computedRefreshableAsync };

function computedRefreshable<T>(getter: () => T, { throttle }: { throttle?: number } = {}) {
  const dirty = ref(true);
  let value: T;

  const update = () => (dirty.value = true);

  if (throttle) {
    watchThrottled(getter, update, { throttle });
  } else {
    watch(getter, update);
  }

  const computedValue = computed(() => {
    if (dirty.value) {
      value = getter();
      dirty.value = false;
    }
    return value;
  });

  return [computedValue, update] as const;
}

function computedRefreshableAsync<T>(getter: () => Promise<T>, defaultValue?: T) {
  const dirty = ref(true);
  let value: T;

  const update = () => (dirty.value = true);

  watch(getter, update);

  const computedValue = computedAsync(async () => {
    if (dirty.value) {
      value = await getter();
      dirty.value = false;
    }
    return value;
  }, defaultValue);

  return [computedValue, update] as const;
}