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

Posted answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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)
  }

}

 

以上是关于[Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts的主要内容,如果未能解决你的问题,请参考以下文章

[TypeScript] Catch unsafe use of "this" in TypeScript functions

[Typescript] Dynamic types: Use TypeScript's Mapped Types and Template Literal Types Together(代码

[TypeScript] Use the never type to avoid code with dead ends using TypeScript

关于 Vue 3 + TypeScript 和 Augmenting-Types-for-Use-with-Plugins 的问题

[Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript