@Inject decorate usage with provide

Hi,

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,

[RockyNiu]

@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

[kaorun343]

@pensacola1989

Hi.

This is not a @Inject specific problem.

When using vue-class-component, please set this.foo at created hook (or mounted). Then it’ll work well.

In addition, this.axios = axios is not a good code because when assigning an object at constructor (this is equivalent to assign an object in data option when writing in plain JavaScript), the property becomes reactive property. So, in my humble opinion, I recommend you to avoid assigning it at constructor option. As well as this.foo, it’ll be better to assign it at created hook than you do.

@Component()
export class ListComponent extends Vue {
  items: UserResponse[] = []
  private url = 'your url'
  protected axios: typeof axios
  
  @Inject(foo) foo: Foo

  created() {
    console.log(typeof this.foo) // 'object'
    this.axios = axios
  }
}