State & Storage

ZhinNX includes a small state layer for common app data. You can create named state, read nested values, set values, update values with a callback, and subscribe to changes.

import {
  state,
  get,
  set,
  update,
  subscribe,
  save,
  load
} from 'zhinnx'

state('counter', { count: load('count', 0) })

subscribe('counter', value => {
  save('count', value.count)
})

set('counter.count', 1)
update('counter.count', value => value + 1)

console.log(get('counter.count'))

When to use state

Use state for data that must be shared between pages or actions. Examples include the active user, current song, theme preference, form draft, selected tab, and API result cache.

Local storage helpers

Helper	Purpose
save(key, value)	Save JSON-serializable data.
load(key, fallback)	Load data or return fallback.
remove(key)	Remove a saved value.

Common mistake

Do not store everything globally. If a value is only needed inside one render function, keep it local. State is for shared or persistent behavior.

FastLoad-safe state updates

On a FastLoad page, small UI changes should avoid a full route render. For cart counters, liked buttons, badges, and small toggles, update state with { render: false }, then patch the specific UI area.

update('shop.cart', cart => {
  const next = Array.isArray(cart) ? [...cart] : []
  next.push({ id: 'product-1', qty: 1 })
  save('cart', next)
  return next
}, { render: false })

patch('.cart-count', get('shop.cart', []).length)

If debug mode is active, ZhinNX warns when a state update causes a full render while FastLoad is active.