vue3decorators

注意这不是一个通用的注解包，这只是脚手架项目

Vue3Template：https://github.com/helpcode/Vue3Template

抽离出来的注解，因为每次在项目中使用的时候需要导入太多次，太麻烦。所以将注解处理出来，单独作为包。

部分注解只能在Vue3Template这个脚手架项目中使用，有的是注解通用的！

欢迎使用 Vue3Template 来快速开发构建您的项目，一起来感受Vue3+Typescript的魅力把..

1: 安装

npm i --save-dev vue3decorators

2: 使用

import { Injectable, Inject } from 'vue3decorators';

3: 已实现的注解

注意阅读下面内容的时候请参考 Vue3Template 项目来对照看，Vue3Template 源码中有更详细的使用和注释！

1：@Directive()

本注解主要在文件 directive/index.directive.ts的类DirectiveList中使用，加在类DirectiveList的方法上，让方法成为Vue的自定义指令，方法名就是指令名。例如方法public index() {}，那么Vue组件中指令则为：v-index。

示例：

# 文件：directive/index.directive.ts

import { Directive } from 'vue3decorators';
export class DirectiveList {
    @Directive()
    public index() {
        return {
            bind: (el: Element, binding: VNodeDirective, vnode: VNode) => {
                // console.log(el)
                // console.log(binding)
                console.log("v-index 指令接收到的数值：", binding.value);
                // console.log(vnode);
            }
        }
    }
}

Vue组件中使用：

 h2(v-index='200') {{title}}

2：@Injectable()，@Inject() 依赖注入

注解@Injectable()加在类，主要作用是收集依赖，而@Inject()加在类的属性上，会把@Injectable()的类注入到属性上。

示例：

import { Injectable, Inject } from 'vue3decorators';

@Injectable()
class Demo1 {
    public hello: string = "我是Demo1类"
}

class Demo2 {

    @Inject()
    public test!: Demo1;

    public GetTest(): string {
        return this.test.hello  // 返回："我是Demo1类" 
    }
}

3：@GET、@POST、@PUT、@DELETE

主要在文件 service/impl 中使用，加在类的方法上，注解不需要参数。遵守约定：

被注解的方法名和index.config.ts 中 ApiList 的key名称一样即可。

设计思路：

• 1: index.dao.ts 的类 Axios 上有注解 @Injectable()，当程序通过init.run.ts运行的时候，注解@Injectable()会将类给存储到公共数组中。
• 2: 然后在使用注解@Inject()的时候会从数组中将axios取出来，然后进行 new axios() 实例化，之后保存到专门的Model中存放。
• 3: 当用户在使用@GET、@POST、@PUT、@DELETE这些注解的时候，这些注解会从Model取出axios的实例，然后调用 axios类中的方法进行网络请求。
• 4: 请求到的数据会作为@GET、@POST、@PUT、@DELETE这些注解所注解方法的返回值，直接返回给方法调用者

设计的原因：

注解内部会自动保存并调用，用户配置好的Axios实例！而不是使用注解内置自己配置的Axios，如果使用注解自身的那么会导致用户的一些自定义请求拦截，自定义请求基地址，自定义请求头都不存在。所以这边注解内部必须使用用户配置好的实例，把自由权交给使用者...

示例：

import { HomeService } from "../Home.service";
import { GET, POST, GlobalMethod } from 'vue3decorators';

class HomeServiceImpl implements HomeService {

    /**
     * @GET 被打上这些注解的Service可以在Vue组件中使用。
     * 1: 方法内部不需要任何的处理逻辑，留空即可。
     * 2: 方法调用的时候只接受请求需要的参数
     * 3: 现在V3版本的注解例如@GET()是不需要传入请求地址参数的，方法名就是接口地址的key名称
     * 例如：index.config.ts 中 ApiList 的key名称
     * {
     *   DevUrl: 'http://localhost:9000',
     *   ProdUrl: 'http://127.0.0.1:3000',
     *   ApiList: {
     *     index: '/test',
     *     haha: '/haha'
     *   },
     * }
     * 这里的key名称：index，haha，直接作为 ServiceImpl 的方法名即可。
     * 注解内部会自动去根据方法名，例如 index 去寻找 ApiList 下的key，从而拿到请求地址 /test
     * 然后注解会自动调用用户配置好的Axios，来发送请求，注意请求处理的所有逻辑交给用户。注解只负责
     * 调用用户配置好的Axios而已。请求成功后，注解会自动调用被注解的方法，然后直接将数据返回给Vue组
     * 件调用者，这也就是这里为什么方法内部不需要处理逻辑的原因。因为一切都在注解内部实现，并遵守
     * 约定大于配置  的原则。
     * @param data object 请求参数
     */
    @GET()
    public async index(data: object): Promise<any> {}

    @POST()
    public async haha(data: object): Promise<any> {}

}

Vue组件中调用：

<template lang="pug">
 // .....
</template>

<script lang="ts">
import HomeServiceImpl from '@impl/home.service.impl'
export default createComponent({
    setup(props: PropOptions, ctx: SetupContext) {
        onMounted(async ()=> {
            let data = await HomeServiceImpl.index({ id: 1,page: 1 });
            console.log("ajax请求到的数据为：", data)
        })
    }
})
</script>

<style lang="stylus" scoped>
  // .....
</style>

4：@Mixin()

主要在文件 mixin/index.mixin.ts 中使用，加在类的方法上，会让类的方法自动成为Vue的全局mixin。

示例：

@Injectable()
export class MixinList {
    
    @Mixin()
    public Router() {
        return {
            beforeCreate: setRuntimeVM
        }
    }
}

5：@GlobalMethod()

@GlobalMethod()可以随意加在类的方法上，不过个人推荐加在utils/文件夹的类的方法上。类的方法一旦被加上这个注解那么这个方法将成为全局方法，可以在Vue组件中直接是使用，注意组件内调用的时候是：$方法名()，之所以加上$是为了防止和组件内方法名冲突！！

示例：

export class Utils {
   /**
   * 动态设置网页title
   * @param title
   */
  @GlobalMethod()
  public setTitle(title: string): void {
    document.title = title;
  }
}

Vue组件中调用：

<template lang="pug">
 // .....
</template>

<script lang="ts">
export default createComponent({
    setup(props: PropOptions, ctx: SetupContext) {
        onMounted(async ()=> {
             console.log("全部方法：", (ctx.root as any).$setTitle("测试"));
        })
    }
})
</script>

<style lang="stylus" scoped>
  // .....
</style>