example of reactive method-style getter caching

getter-reactive-caching.js

// recreation of a computed property
const computed = (vm, func) => {
  vm.$watch(
    func,
    null, // callback not used for lazy
    { lazy: true }, // lazy means we can just flag as dirty
  );
  // eslint-disable-next-line no-underscore-dangle
  const watcher = vm._watchers[vm._watchers.length - 1];

  // add an accessor
  watcher.lazyValue = () => {
    if (watcher.dirty) {
      watcher.evaluate();
    }
    watcher.depend(); // means any calling computed will have transitive deps
    return watcher.value;
  };
  return watcher;
};

// Cache Wrapper for Method-style Getter
const methodStyleCache = (getVM, getter) => {
  let watchers = {};
  return (...args) => {
    // Remove old watchers if the getter is rebuilt
    Object.values(watchers).forEach((w) => w.teardown());
    watchers = {};
    const innerMethod = getter.call(null, ...args);

    return (id) => {
      let watcher = watchers[id];
      if (!watcher) {
        watcher = computed(getVM(), () => innerMethod(id));
        watchers[id] = watcher;
      }
      return watcher.lazyValue();
    };
  };
};

// Cacher that can be attached as a plugin to get a store reference
const methodGetterCacher = () => {
  let store;
  const getVM = () => store._vm;
  return {
    plugin: (st) => { store = st; },
    cache: (getter) => methodStyleCache(getVM, getter),
  };
}