How to initialise computed with a default value?

[ho4code]

I'm trying to do the following:

• have a computed return a cachedValue so long as the referenceRef.value is empty
• when the referenceRef.value changes, computed then reflects its value and discards the cachedValue

  const computedWithCache = <K extends keyof CachedState>(key: K, getter: () => CachedState[K]) => {
    const cachedValue: CachedState[K] = cache.get(key);
    return computed<CachedState[K]>(() => (isEmpty(getter()) ? cachedValue : getter()));
  };

  const referenceRef = ref(null);
  const finalComputed = computedWithCache('someCacheKey', () => referenceRef.value);

  // should return cachedValue
  finalComputed.value;

  referenceRef.value = 'something';
  // should return referenceRef.value
  finalComputed.value;

  referenceRef.value = null;
  // should still be bound to the referenceRef and return "null"
  finalComputed.value;

However it's losing its reactivity on the pass where the referenceRef is empty (seems like it binds to the cachedValue, which is not reactive?)

Is there a way to achieve that?

[ado11231]

You need to always access referenceRef reactively, regardless of which value you return. The trick is seperating your logic.

const computedWithCache = <K extends keyof CachedState>(key: K, getter: () => CachedState[K]) => {
  const cachedValue: CachedState[K] = cache.get(key);
  return computed<CachedState[K]>(() => {
    const current = getter(); // always read — this registers the dependency
    return isEmpty(current) ? cachedValue : current;
  });
};

Calling getter() once and storing the result...

-referenceRef is always accessed on every execution, Vue always registers it as a dependency

-you still return cachedValue when it's empty

-when referenceRef changes to something non-empty, Vue re-runs the computed, and now returns the live value

-when it goes back to null, the computed re-runs again and returns null