npm-vue

Reatom integration for Vue Composition API.

Vue has simple and powerful enough primitives for state processing out of the box, refs can be created outside the component and most of the tasks are solved by it. But there are a number of issues that reatom covers better.

• Atoms has lifecycle hooks, usefull for states used in many components. It allows you to init a resource on the first subscription and dispose the resource on the last unsubscription.
• Actions help you group and better log and debug your logic. Reatom allows you to trace the entire chain of data transformations through all sync and async actions and atoms.
• Reatom is a perfect solution as a multi frontend core as it is small, powerful and already has adapters for vue, react, solid, svelte (lit and angular adapters in development).
• Reatom has very powerful primitives for describing asynchronous logic, gathering the best of rxjs, redux-saga and TanStack Query. There seem to be no alternatives here.
• Reatom has one of the largest ecosystems of any state manager and probably the most balanced. At the same time, each package is developed with a manic focus on band size and perf.

Installation

#

npm i @reatom/npm-vue

API

#

createReatomVue

#

A function that creates a Vue App plugin↗ which you can use. Accepts a Ctx object.

import { createCtx } from '@reatom/core'
import { createReatomVue } from '@reatom/npm-vue'

const ctx = createCtx()
app.use(createReatomVue(ctx))

useCtx

#

A function to inject a Ctx object provided by createReatomVue. Used by different APIs internally.

reatomRef

#

A function that turns a Reatom atom into a Vue ref which is updated on target atom changes. A returned pseudo-ref is mutable if a target atom is mutable itself.

Because all Reatom APIs require ctx to be available, you must either provide it with createReatomVue plugin or pass it explicitly as a second argument to reatomRef.

import { atom } from '@reatom/core'
import { reatomRef } from '@reatom/npm-vue'

const count = atom(0, 'count')

// turn an atom into a ref-like object
const countRef = reatomRef(count)
// selectors are supported as well
const countDoubleRef = reatomRef((ctx) => ctx.spy(count) * 2)

countRef // Ref<number>
countRef.value // 0
countRef.value = 3 // 3

countDoubleRef // Readonly<Ref<number>>
countDoubleRef.value // 6

useAction

#

Binds an action or a function to a ctx value.

<script>
import * as model from './model'
import { useAction } from '@reatom/npm-vue'

const doSomething = useAction(model.doSomething)
</script>

<template>
  <BigBrightButton @click="doSomething">Do it!</BigBrightButton>
</template>

If you don’t have a declared action, you can pass a plain function to useAction and give it a name using the second parameter:

const doSomething = useAction((ctx) => {
  doSomethingBad(ctx)
  doSomethingGood(ctx)
}, 'doSomething')

To bind an action to a custom Ctx object, pass it as a field of a config object:

const doSomething = useAction(model.doSomething, { ctx: differentCtx })

const doSomething = useAction(
  (ctx) => {
    doSomethingBad(ctx)
    doSomethingGood(ctx)
  },
  { name: 'doSomething', ctx: differentCtx },
)

useCtxBind

#

Creates a function for binding multiple functions to a ctx at any time.

const aAction = action('aAction')
const bAction = action('bAction')
const cAction = action('cAction')

const bind = useCtxBind()
const aFn = bind(aAction)
const bFn = bind(bAction)
const cFn = bind(cAction)

Example

#

See the source code↗ or open in StackBlitz↗

Usage

#

Setup ctx somewhere in the app root:

import { createCtx } from '@reatom/core'
import { createReatomVue } from '@reatom/npm-vue'

const ctx = createCtx()
app.use(createReatomVue(ctx))

Then use Reatom state in your components: