[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