[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>
最新文章
- 在idea中maven项目jdk编译version总是跳到1.5
- JS高程3.基本概念(2)
- android源码framework下添加新资源的方法
- mybatis的批量删除
- AC自动机题目汇总
- PL301 matrix内部模块
- loadrunner个版本历程
- SQL Agent Job ->;>; 通过sys.sysprocesses的program_name字段来定位对应的Job
- dbutils 执行sql返回的数据类型
- 字体在Android View中的输出 drawText
- java循环、数组练习
- 201521123074 《Java程序设计》第7周学习总结
- TomCat的安装及测试
- Perl的列表和数组
- oracle 外连接以及用on和where 的区别
- js点滴
- 使用Python监控Linux系统
- SCCM2012 R2实战系列之十二:解决OSD分发时间过长的问题
- [leetcode]270. Closest Binary Search Tree Value二叉搜索树中找target的最接近值
- C#.NET中遍历指定目录下的文件(及所有子目录及子目录里更深层目录里的文件)