vue3decorators
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.6 • Public • Published

    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.tsApiList 的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>

    Keywords

    none

    Install

    npm i vue3decorators

    DownloadsWeekly Downloads

    0

    Version

    1.2.6

    License

    ISC

    Unpacked Size

    26.1 kB

    Total Files

    27

    Last publish

    Collaborators

    • bmy