1.0.2 • Published 4 years ago
vue-ioc-di v1.0.2
Dependency Injection In Vue
Dependency injection (DI), is an important application design pattern. Here provide DI framework for
Vue
, which is typically used in the design of Vue applications to increase their efficiency and modularity. Dependencies are services or objects that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself. In Vue, this library DI framework provides declared dependencies to a class when that class is instantiated. you can use it to make your apps flexible, efficient, and robust, as well as testable and maintainable.
Get Started
Install package
yarn add vue-ioc-di
Create a service
app.service.ts
import { Reactive, Injectable } from 'vue-ioc-di'; @Injectable({ providedIn: 'root'}) // global service export class AppService { @Reactive() // make `name` reactive for updating dom. name: string = 'App Game Rxjs'; age: number = 10; constructor() { } }
Use in vue component
<template> <div> {{ srv.name }} <game></game> </div> </template> <script lang="ts"> import Vue from 'vue'; import { Component } from 'vue-property-decorator'; import Game from './components/game/index.vue'; import { AppService } from './app.service'; import { Reactive, Injectable, Inject } from 'vue-ioc-di'; @Component({ components: { Game }, providers: [ AppService ], // When `AppService` provide in 'root', omit it. }) export default class App extends Vue { @Inject(AppService) srv!: AppService; doWork() { // use service this.srv.doSomething(); } } </script> <style scoped> </style>
More about Dependency injection.