https://github.com/raiondesu/vuse-rx

Vue 3 + rxjs = ❤
https://github.com/raiondesu/vuse-rx

composition-api reactive reactive-programming rx rxjs state state-management typescript vue vue-next vue3

Last synced: 5 months ago
JSON representation

Vue 3 + rxjs = ❤

• Host: GitHub
• URL: https://github.com/raiondesu/vuse-rx
• Owner: Raiondesu
• License: mit
• Created: 2021-01-31T19:54:38.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-01-22T21:05:17.000Z (about 3 years ago)
• Last Synced: 2025-04-15T06:12:49.063Z (11 months ago)
• Topics: composition-api, reactive, reactive-programming, rx, rxjs, state, state-management, typescript, vue, vue-next, vue3
• Language: TypeScript
• Homepage: https://vuse-rx.raiondesu.dev
• Size: 6.05 MB
• Stars: 60
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


  



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`](https://vuse-rx.raiondesu.dev/api/use-rx-state) - flux-like state management with observables;

- [`syncRef`](https://vuse-rx.raiondesu.dev/api/refs#syncref) - synchronize two refs with either one-way or two-way binding;

- [`fromRef`](https://vuse-rx.raiondesu.dev/api/refs#fromref) - create an observable from any ref or watch source;

- [`refFrom`](https://vuse-rx.raiondesu.dev/api/refs#reffrom) - create a ref from a promise/observable/iterable/generator or anything else;

### See the [docs](https://vuse-rx.raiondesu.dev) 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](https://vuse-rx.raiondesu.dev/recipes/counter).

```vue

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 }),

    };

  }

});

  
Counter: {{ state.count }}

  increment

  


```

## Contributing

Pull requests and stars are always welcome. ❤\

For bugs and feature requests, [please create an issue](https://github.com/Raiondesu/vuse-rx/issues/new).