@vegajs/vortex
v1.0.3-beta.11
Published
π A next-gen, lightweight state management library for JavaScript and TypeScript.
Downloads
1,230
Maintainers
Readme
Why Choose Vortex? πβ¨
- π Type-safe Excellence: Guarantees full type-safetyβno
any
types lurking around. - β‘ Minimized Re-renders: Only essential updates occur, keeping your app snappy.
- π Framework Agnostic: Integrates effortlessly with React, Vue, and more.
- π Plugin Ready: Extend functionality easily with a rich plugin system.
- π§ DevTools Support: Inspect and debug your state seamlessly with Vortex DevTools.
- π§ͺ Lightweight & Powerful: Just ~2.3kB, with zero dependencies.
- π€© Developer Delight: Intuitive API that grows with your project's needs.
Installation
Install Vortex using your favorite package manager:
npm install @vegajs/vortex
# or
yarn add @vegajs/vortex
# or
pnpm add @vegajs/vortex
Quick Start: Creating a Store
Vortex makes creating a store type-safe, reactive, and straightforward.
import { defineStore } from '@vegajs/vortex';
export const counterStore = defineStore(({ reactive, computed, effect }) => {
const count = reactive(0);
const doubleCount = computed(() => count.value * 2);
effect(() => {
console.log(`Count is: ${count.value}`);
});
const increment = () => count.set(prev => prev + 1);
return { count, doubleCount, increment };
});
Core API
defineStore(setup, options?)
Create a powerful store with reactive state, computed properties, and effects to keep your logic organized and streamlined.
setup
: A function that initializes the state using helper functions.options
: Optional configurations like plugins, dependency injection, and store naming.
reactive(initialValue)
Define a reactive state that automatically updates as it changes.
computed(fn)
Define a computed property based on reactive dependencies.
effect(fn)
Create side effects that respond to changes in reactive state.
query(fn, options)
Set up asynchronous queries with built-in state tracking (isLoading
, isError
, etc.).
DIContainer
A simple dependency injection container for managing services and external dependencies.
Real-World Example
A simple counter with reactive state that increments on each click.
import { defineStore, useStore } from '@vegajs/vortex';
const counterStore = defineStore(({ reactive, computed }) => {
const count = reactive(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => count.set(prev => prev + 1);
return { count, doubleCount, increment };
});
const Counter = () => {
const { count, doubleCount, increment } = useStore(counterStore);
return (
<div>
<p>count: {count}</p>
<p>double count: {doubleCount}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
License
MIT