Learn TypeScript 3 by Building Web Applications

Handling search using the MusicService

Before we can use the MusicService in our Home view, we need to inject it. Since we have already configured InversifyJS, we can do that really quickly:

1. First of all, open the src/views/Home.vue file and add the following imports:

import {MusicService} from '@/services'; 
import {TYPES} from '@/ioc/types'; 
import {lazyInject} from '@/ioc/config'; 

2. Then, create a new field for the service inside the class and decorate it with @lazyInject as follows:

@lazyInject(TYPES.MUSIC_SERVICE) 
private musicService!: MusicService; 

3. We can verify that our service correctly gets injected by modifying the mounted life cycle hook:

public mounted() { console.log('Home component mounted'); console.log('Music service ...