Docs / Core / Store
ven.js

Store

A minimal global state container with pub/sub — complementary to fine-grained signals. Useful for app-wide state like auth or theme that many pages need to read.

venjs.createStore(initialState)

Creates a store holding a plain object. Updates are shallow-merged. Subscribers are notified on every setState.

const store = venjs.createStore({ ...initialState });
MethodDescription
getState()Returns the current state object (read-only by convention).
setState(patch)Merges patch into state ({ ...state, ...patch }) and notifies subscribers.
subscribe(fn)Registers a listener (state) => void. Returns an unsubscribe function.

Example

// logic/auth.js
export const auth = venjs.createStore({ user: null, token: null });

// components/home.js
import { auth } from "../logic/auth.js";

const HomePage = () => {
  const state = auth.getState();
  return venjs.div({}, [
    venjs.p({}, state.user ? "Hello, " + state.user.name : "Please log in")
  ]);
};
window.HomePage = HomePage;

Combining with render

Subscribe inside an effect so store updates re-render your tree:

const theme = venjs.createStore({ dark: false });

const App = () => venjs.div({ class: theme.getState().dark ? "dark" : "light" }, [
  venjs.button({ onclick: () => theme.setState({ dark: !theme.getState().dark }) }, "Toggle")
]);

venjs.effect(() => {
  const stop = theme.subscribe(() => venjs.render(app, App));
  stop(); // cleanup when effect re-runs
});
Signals vs Store: Use signal for component-local, fine-grained reactivity (automatic DOM patching). Use createStore for app-wide state you want to observe imperatively (e.g. side effects, logging, analytics).