zoukankan      html  css  js  c++  java
  • [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

    Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more patterns. An IoC container helps decoupling dependencies by using a class constructor or properties to identify and inject its dependencies. This lesson will show you how can you create and use an IoC container to decouple an http client and users service dependencies in a Vue component with TypeScript and InversifyJS.

    When you are using Class, you also need to mantain the singleton of Class. Use can use similiar approach as Angular in VueJS as well.

    Install:

    npm i --save inversify reflect-metadata inversify-inject-decorators

    Modify tsconfig.json:

    {
      "compilerOptions": {
        "lib": [
          "dom",
          "es5",
          "es2015"
        ],
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true
      }
    }

    main.ts:

    import "reflect-metadata"
    import "core-js/es6/map"
    import "core-js/es6/symbol"
    
    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })

    Tip: If you want to create unqiue String, you can use Symbol('UserService'), it is useful tool.

    Create a container.ts, which contains all the singleton services:

    import {Container} from 'inversify';
    import {UsersService} from './user-service';
    import {HttpClient} from './http-client';
    import {TYPES} from './types';
    import getDecorators from 'inversify-inject-decorators';
    
    const container = new Container();
    
    container.bind<UserService>(TYPES.UsersService).to(UsersService);
    container.bind<HttpClient>(TYPES.HttpClient).to(HttpClient);
    
    // Lazy inject is good for props
    const {lazyInject} = getDecorators(container);
    
    export {container, lazyInject}

    Create types.ts:

    export const TYPES = {
        UsersService: Symbol('UsersService'),
        HttpClient: Symbol('HttpClient')
    }

    http-client.ts:

    From:

    export class HttpClient {
        get(url: string): Promise<any> {
            return fetch(url).then(data => data.json())
        }
    }

    To:

    import {injectable} from 'inversify';
    
    @injectable()
    export class HttpClient {
        get(url: string): Promise<any> {
            return fetch(url).then(data => data.json())
        }
    }

    user-service.ts:

    From:

    export class UsersService {
        private http: HttpClient;
    
        constructor() {
            this.http = new HttpClient()
        }
    
        getUsers(): Promise<any> {
            return this.http.get('https://jsonplaceholder.type');
        }
    }

    To:

    import {inject, injectable} from 'inversify';
    import {TYPES} from './types';
    
    @injectable()
    export class UsersService {
    
        constructor(@inject(TYPES.HttpClient) private http) {
        }
    
        getUsers(): Promise<any> {
            return this.http.get('https://jsonplaceholder.type');
        }
    }

    Then we can use UsersService in App.vue:

    <script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import { lazyInject } from './container'
    import { TYPES } from './types'
    @Component
    export default class App extends Vue {
      users = []
      @lazyInject(TYPES.UsersService)
      usersService
      created() {
        this.usersService.getUsers()
          .then(data => {
            this.users = data
          })
      }
    }
    </script>
  • 相关阅读:
    反击黑客之对网站攻击者的IP追踪
    如何使用Nginx对抗DDoS攻击?
    nginx网站攻击防护
    Ora-01536:超出了表空间users的空间限量
    ASP.Net请求处理机制初步探索之旅
    ASP.Net请求处理机制初步探索之旅
    ASP.Net请求处理机制初步探索之旅
    自己动手写工具:百度图片批量下载器
    自己动手写游戏:坦克撕逼大战
    【大型网站技术实践】初级篇:海量图片的分布式存储设计与实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9545719.html
Copyright © 2011-2022 走看看