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.