vuse-rx

Complete first-class rxjs support for Vue 3

What is this?

Ever felt like combining flux architecture with rxjs? Or maybe in need of creating observables from Vue refs or other Vue features?
Well, this library is exaclty for those types of cases.

Other highlights are:

• 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

A simple example of a counter state with an increment reducer:

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

export default defineComponent({
  setup() {
    const {
      actions: {
        increment,
        setCount
      },
      state,
      state$ // state observable
    } = useRxState({ count: 0 })({
      // stateful reducer
      increment: () => state => ({
        // 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(state, 'count', 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.