Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit be6a51c

Browse filesBrowse files
committed
Setting up DI in VUE through @register decorator
1 parent ab31e39 commit be6a51c
Copy full SHA for be6a51c

File tree

1 file changed

+11
-11
lines changed
Filter options

1 file changed

+11
-11
lines changed

‎README.md

Copy file name to clipboardExpand all lines: README.md
+11-11Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -314,11 +314,11 @@ We need to create a container instance for holding all registered injections. We
314314

315315
```js
316316
import { Container } from 'inversify';
317-
let container = new Container();
317+
const container = new Container();
318318
export default container;
319319
```
320320

321-
and then just execute it in the bootstrap phase of the application:
321+
and then just execute it in the application bootstrap:
322322

323323
```js
324324
import './di';
@@ -339,7 +339,7 @@ export default class AuthService {
339339
```js
340340
import { Container } from 'inversify';
341341
import AuthService from 'services/auth';
342-
let container = new Container();
342+
const container = new Container();
343343
container.bind('authService').to(AuthService);
344344
export default container;
345345
```
@@ -361,7 +361,7 @@ class LoginView extends Vue {
361361

362362
There are a couple of issues with this approach:
363363

364-
1. If we register all our services in `di.js`, then we nullified the code splitting because everything is required during the application bootstrap. To solve this issue, let's register service into the container only when is required for the first time:
364+
1. If we register all our services in `di.js`, then we nullified the code splitting because everything is required during the application bootstrap. To solve this issue, let's register a service into the container only when it is required for the first time:
365365

366366
```js
367367
import container from './di';
@@ -415,7 +415,7 @@ Decorators can help us to eliminate lots of code repetition and make our code cl
415415

416416
#### @Register decorator
417417

418-
The @Register() decorator is just a syntactic sugar for registering classes to the container. In Typescript, you would have `@injectable` and `@inject` decorators available, but this project is not using TS, it's plain JS. The maintainers of InversifyJS have provided another set of decorators/helpers called [inversify-vanillajs-helpers](https://github.com/inversify/inversify-vanillajs-helpers), for using inversify without TS. They just need a unique identifier for each registered class, because they cannot tell which parameter in constructor belongs to which registered class.
418+
The @Register() decorator is just a syntactic sugar for registering classes to the container. In Typescript, you would have `@injectable` and `@inject` decorators available, but this project is not using TS, it's plain JS. The InversifyJS maintainers have provided another set of decorators/helpers called [inversify-vanillajs-helpers](https://github.com/inversify/inversify-vanillajs-helpers), for using inversify without TS. They just need a unique identifier for each registered class, because they cannot tell which parameter in constructor belongs to which registered class.
419419

420420
Let's have classes defined as:
421421

@@ -443,7 +443,7 @@ container.bind("c").to(C);
443443
container.bind("b").to(B);
444444
container.bind("a").to(A);
445445

446-
let c = container.get("c");
446+
const c = container.get("c");
447447
console.log(c instanceof C); // true
448448
```
449449

@@ -459,11 +459,11 @@ container.bind("a").to(A);
459459
In TS, this is done by `@injectable` and `@inject` decorators automatically. Doing this for every class in your project would be annoying, so let's use rather a vanillajs helper:
460460

461461
```js
462-
let register = helpers.register(container);
462+
const register = helpers.register(container);
463463
register("a", ["b", "c"])(A);
464464
```
465465

466-
^^ this helper called `register` is now coupled with the container and does exactly the same thing as a previous example. And the helper can also be used as a decorator:
466+
^^ this helper called `register` is now coupled with the container and does exactly the same thing as the previous example, and the helper can also be used as a decorator:
467467

468468
```js
469469
@register("a", ["b", "c"])
@@ -472,7 +472,7 @@ class A {
472472
}
473473
```
474474

475-
... is equivalent of calling:
475+
... is equivalent to:
476476

477477
```js
478478
register("a", ["b", "c"])(
@@ -486,8 +486,8 @@ In this project, the decorators are defined in `di.js`:
486486
```js
487487
import { helpers } from 'inversify-vanillajs-helpers';
488488

489-
let container = new Container();
490-
let register = helpers.register(container);
489+
const container = new Container();
490+
const register = helpers.register(container);
491491

492492
export { register as Register } // we are exporting decorator with capital R because other decorators we are already using (e.g. for Vuex) also have a capital letter
493493
```

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.