[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>
相关文章
- Vue源码中compiler部分逻辑梳理(内有彩蛋)
- vue webpack文件打包后的文件如何本地运行
- [Vue + TS] Create your own Decorators in Vue with TypeScript
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
- vue.js 3.2.22:用useIntersectionObserver实现滑动到div可见时才运行css动画(@vueuse/core@7.0.3)
- [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- vue v-for遍历json
- 怎样安装vue2和vue3的Vue.js devtools
- SpringBoot 和 Vue 解决页面日期时间控件问题
- BootStrap在Vue中的安装使用详细教程
- webpack打包Vue应用程序流程
- 163:vue+openlayer 根据polygon信息显示多边形,导出KML文件,自定义name和style
- 142:vue+openlayers 测量长度和面积,modifyend后更改数值
- 046:vue+openlayers 点击某点播放视频(示例代码)
- Vue.js 目录结构
- 测试开发之Vue学习笔记-H5实例百度音乐