[Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts

Aspect Oriented Programming, AOP, allows to reuse logic across an entire app in a very neat way, decoupling it from the business logic. Kaop-ts bring us decorators in order to apply AOP. This lesson will show you how you can move cache and exception handling out of your business logic using TypeScript and Kaop-ts

install:

npm i --save kaop-ts

HTML:

<button @click="cacheIt">Cache</button>

Import:

import { beforeMethod, afterMethod, onException, Metadata } from "kaop-ts";

Method:

  @beforeMethod(Advice.getCached)
  @afterMethod(Advice.setCached)
  @afterMethod((meta) => Advice.notify(meta, true))
  @onException(Advice.report)
  cacheIt() {
    console.log("Method executed");
    return fetch("https://jsonplaceholder.typicode.com/users/1")
      .then(res => res.json())
      .then(user => (this.userName = user.name));
  }

Advice:

class Advice {
  static getCached(meta: Metadata<any>) {
    // Access one prop value
    console.log(
      `Cache: ${meta.scope.checkbox.value} -- ${meta.scope.checkbox.checked}`
    );
    // Component name -- method name
    const key = `${meta.scope.$options["_componentTag"]}--${meta.key}`;
    const cached = localStorage.getItem(key);
    if (cached) {
      meta.scope.userName = cached;
      // if have cache then stop here, won't go though the method
      meta.prevent();
      console.log(meta.scope);
    }
  }

  static setCached(meta: Metadata<any>) {
    const key = `${meta.scope.$options["_componentTag"]}--${meta.key}`;

    // From value return by original method are stored in meta.result
    if (meta.result) {
      meta.result.then(() => {
        localStorage.setItem(key, meta.scope.userName);
        console.log(meta.scope);
      });
    }
  }

  static report(meta: Metadata<any>) {
      console.error('Exception ocurred', meta.exception)
  }

  static notify (meta, toServer) {
    // Adding extra params to the function
    console.log('Notifying', toServer)
  }

}