Vue integration for Jotai, a tiny state manager with many atomic tree-shakable stores.
- Small. Less than 1 KB with all helpers. Zero dependencies.
- Fast. With small atomic and derived stores, you do not need to call the selector function for all components on every store change.
- Tree Shakable. The chunk contains only stores used by components in the chunk.
- It has good TypeScript support.
npm install jotai-vueDefine your own state atoms, or take advantage of Jotai's integrations with Immer, XState, TanStack Query, Redux, Zustand and others to wire up pure vanilla javascript state management into your application.
Each atom is their own small piece of shared state.
import { atom } from 'jotai-vue'
export const countAtom = atom(0)Use atoms in your components and the state will automatically be shared across components.
<script setup lang="ts">
import { useAtom } from 'jotai-vue'
// Atoms shouldn't be created in the `setup` scripts, but imported from other files
import { countAtom } from './testAtoms'
const [count, setCount] = useAtom(countAtom)
</script>
<template>
<div>
<p>Times clicked: {{ count }}</p>
<button @click="setCount((prev) => prev + 1)">
increment
</button>
</div>
</template>The most similar library to Jotai is not Pinia, but rather Nanostores or Recoil.
Pinia is a type-safe state store developed by the core Vue.js team, and the replacement for VueX. They, like the core ref from Vue, are all
proxy state solutions. You mutate an object (e.g. store.count++), and then side-effects are automatically calculated. Vue has well-documented limitation on this style of reactivity system.
By comparison, reducer and Atomic state solutions, like useState in React, expect
immutable state updates (e.g. via reducers (prev) => {...prev, count: prev.count+1})
All approaches have their benefits and followers. Jotai acts as a glue for easily working across all of them.
| State Type | Libraries |
|---|---|
| Atomic | Jotai, Nanostores, Recoil |
| Proxy | Pinia, VueX, Valtio, MobX |
| Reducer | Zustand, Redux |
MIT