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 });
| Method | Description |
|---|---|
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).