vuse-rx

Complete first-class RxJS 7+ support for Vue 3

What is this?

vuse-rx is a bridge between Vue 3 and RxJS: it connects reactive states and refs with observables and subjects in a way that enforces separation of concerns and drastically reduces the amount of boilerplate code.

The highlights are:

• useRxState - flux-like state management with observables;
• syncRef - synchronize two refs with either one-way or two-way binding;
• fromRef - create an observable from any ref or watch source;
• refFrom - create a ref from a promise/observable/iterable/generator or anything else;

See the docs for more information

Install

npm i -S vuse-rx

yard add vuse-rx

Use

Below is a simple example of a counter component with a state and two simple reducers. See the docs for a more detailed and interactive example.

<script lang="ts">
import { useRxState, syncRef } from 'vuse-rx';
import { defineComponent, toRef } from 'vue';
import { tap } from 'rxjs/operators';

export default defineComponent({
  setup() {
    const {
      actions: {
        increment,
        setCount
      },
      state,
      state$ // state observable
    } = useRxState({ count: 0 })({
      // stateful reducer with mutation context
      increment: () => (state, mutation) => ({
        // automatic type inference for the state
        count: state.count + 1
      }),

      // stateless reducer
      setCount: (count: string) => ({
        // custom business logic
        count: isNaN(Number(count)) ? 0 : Number(count)
      }),
    }, state$ => state$.pipe(tap(state => console.log('state is updated', state))));

    // "Activating" the actions
    state$.subscribe(state => console.log('counter: ', state.count));

    return {
      increment,
      setCount,
      state,

      // One-way data binding from reactive state (with type convertation)
      countRef: syncRef(toRef(state, 'count'), { to: String }),
    };
  }
});
</script>

<template>
  <p>Counter: {{ state.count }}</p>
  <button @click="increment">increment</button>
  <input v-model="countRef" @keyup.enter="setCount(countRef)"/>
</template>

Contributing

Pull requests and stars are always welcome. ❤
For bugs and feature requests, please create an issue.