@Inject decorate usage with provide
See original GitHub issueHi,
As a follow-up question from #11 , I wonder if this is correct approach or not.
Foo.ts
class Foo {
public bar: string = "Hello World";
}
export default Foo;
ParentComponent.vue:
<template>
<child-component></child-component>
</template>
<script language="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import Foo from "./Foo";
import ChildComponent from "./ChildComponent.vue";
let foo = new Foo();
@Component({
name: "Parent",
components: {
childComponent: ChildComponent
},
provide: foo
})
export default class ParentComponent extends Vue {
}
</script>
ChildComponent.vue:
<template>
<p>{{ foo.bar }}</p>
</template>
<script language="ts">
import Vue from "vue";
import { Component, Inject } from "vue-property-decorator";
import Foo from "./Foo";
@Component({
name: "Child"
})
export default class ChildComponent extends Vue {
@Inject(Symbol("Foo"))
public foo: Foo;
created(): void {
console.log(this.foo.bar);
}
}
</script>
When I ran this code, this.foo
in the ChildComponent
is undefined
. In other words, the Foo
instance has not been properly injected from ParentComponent
. Could you confirm that I used both provide/inject pair properly?
Cheers,
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (2 by maintainers)
Top Results From Across the Web
Dependency Injection using Decorators | by Chidume Nnamdi
Decorators are an experimental feature in ES6 that is designed to modify class, methods, parameters at runtime. It provides a way of adding...
Read more >Simple Injector decoration with additional dependency
There are multiple ways to do this in Simple Injector. First of all, you can let your decorator's constructor depend on the DecoratorContext...
Read more >How to Use the @Injectable Decorator in Angular | Pluralsight
The @Injectable decorator together with the 'providedIn' option means the service should not be added within the providers' array of a module.
Read more >Angular & Dependency Injection: tricks with Decorators
They're decorators which we can apply to our dependencies (the ones we place in the constructor of our classes). They're not used too...
Read more >Adding decorated classes to the ASP.NET Core DI container ...
In my last post, I described how you can use Scrutor to add assembly scanning to the ASP.NET Core built-in DI container, without...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@justinyoo nice work! Thank you for your help! I have resolved it as here https://github.com/RockyNiu/amorphic-ticket-demo/tree/feature/vue/apps/ticket/public/vue
@pensacola1989
Hi.
This is not a
@Inject
specific problem.When using
vue-class-component
, please setthis.foo
atcreated
hook (ormounted
). Then it’ll work well.In addition,
this.axios = axios
is not a good code because when assigning an object atconstructor
(this is equivalent to assign an object indata
option when writing in plain JavaScript), the property becomesreactive property
. So, in my humble opinion, I recommend you to avoid assigning it atconstructor
option. As well asthis.foo
, it’ll be better to assign it atcreated
hook than you do.