How to define subscriptions based on props with `vue-class-component` ?

[Ni55aN]

I want to output value from BehaviorSubject that defined in service. Service injected to component with help of vue-typescript-inject.

Simple solution:

import { interval, BehaviorSubject } from 'rxjs';
import { injectable } from 'vue-typescript-inject';

@injectable()
export class ServiceA {
  public num = new BehaviorSubject(0);

  constructor() {
    interval(1000).subscribe(() => {
        this.num.next(this.num.value + 1)
    });
  }
}

import Vue from 'vue';
import Component from 'vue-class-component';
import { inject } from 'vue-typescript-inject';
import { ServiceA } from './service';

@Component({
  providers: [ServiceA]
})
export default class App extends Vue {
  public num: number = 0;
  @inject(ServiceA) public service!: ServiceA;

  public created() {
    this.$subscribeTo(this.service.num, (v) => this.num = v);
  }
}

disadvantages: it is necessary to create a property inside the component and change it when subscribing. It looks simple, but is it possible to somehow make a output directly?

I cannot do like this:

@Component({
  providers: [ServiceA],
subscriptions() {
   return {
      num: this.service.num // this.service not defined
   }
}

or print directly in template

.line Counter: {{service.num}}

Is there anythink like async pipe in Angular ?

[Ni55aN]

I have solved it. tslint confused me when using this.

The definition should be as follows:

@Component({
  providers: [ServiceA],
  subscriptions() {
    return {
      num: (this as App).service.num,
    }
  },
})