vue-ioc-di
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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.

npm

Get Started

  1. Install package

    yarn add vue-ioc-di

  2. 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() {
        }
    }
  3. 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>
  4. More about Dependency injection.

Examples

Dependents (0)

Package Sidebar

Install

npm i vue-ioc-di

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

6.7 kB

Total Files

4

Last publish

Collaborators

  • mokeyish