https://github.com/mokeyish/vue-ioc-di

Dependency Injection In Vue，Inspired by Angular. Vuex replacement.
https://github.com/mokeyish/vue-ioc-di

di ioc reactive reactive-service-property service vue vue-ioc-di vuex

Last synced: 18 days ago
JSON representation

Dependency Injection In Vue，Inspired by Angular. Vuex replacement.

• Host: GitHub
• URL: https://github.com/mokeyish/vue-ioc-di
• Owner: mokeyish
• Created: 2020-06-10T11:29:39.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T19:00:07.000Z (almost 2 years ago)
• Last Synced: 2024-10-09T18:40:20.733Z (about 1 month ago)
• Topics: di, ioc, reactive, reactive-service-property, service, vue, vue-ioc-di, vuex
• Language: JavaScript
• Homepage:
• Size: 2.43 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://img.shields.io/npm/v/vue-ioc-di.svg)](https://www.npmjs.com/package/vue-ioc-di) 

## Get Started

1. Install package

   `yarn add vue-ioc-di`

2. Create a service

    app.service.ts

    ```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

    ```vue

    

        


            {{ srv.name }}

            

        

    

    

    

        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();

            }

        }

    

    

    

    

    

    ```

4. More about  [Dependency injection](https://github.com/mokeyish/dependency-injection.ts).


## Examples

 - [example](./example)