lostlover / vue-rxjs-decorator

create rxjs observable object with decorator

vue-rxjs-decorator

Install

npm i -S vue-rxjs-decorator

Usage

First, you should use VueRx plugin;

// main.ts
import VueRx from "vue-rx";

Vue.use(VueRx);

@ObservableData(name: string)

<template>
  <div>{{data$}}</div>
</template>

import { ObservableData } from "vue-rxjs-decorator";

@Component
export default class App extends Vue {
  @ObservableData("data$")
  _data$() {
    return observable.pipe(handle);
  }

  created() {
    // you can subscribe like this
    this.$observables.data$.subscribe();
  }
}

@EventSubject()

<template>
  <button v-stream:click="{subject: streamClick, data: 1}">add</button>
  <div>{{data$}}</div>
</template>

import { ObservableData, EventSubject } from "vue-rxjs-decorator";

@Component
export default class App extends Vue {
  data$!: any;

  @EventSubject()
  streamClick!: Subject<any>;

  @ObservableData("data$")
  _data$() {
    return this.streamClick.pipe(handle);
  }
}

@ObservableMethod(name: string)

<template>
  <div>{{data$}}</div>
  <button @click="addHandle(100)"></button>
</template>

import { ObservableData, ObservableMethod } from "vue-rxjs-decorator";

@Component
export default class App extends Vue {
  addHandle!: (n: number) => void;

  @ObservableData("data$")
  _data$() {
    return this.addHandle$.pipe(handle);
  }

  @ObservableMethod("addHandle")
  addHandle$!: Observable<number>;
}

See also

vue-rx vue-class-component

License

MIT License