Dependency Injection In Vue,Inspired by Angular. Vuex replacement.
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.
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.