Stores

What is a store?

A store (aka state management tool) is a tool that helps you manage complex UI state.

Not properly managing UI state is one of the most (if not the most) common root cause for buggy user interfaces. A store enables you to get under control even the most complex UI state logic.

A store usually works by representing state changes as atomic changes to an immutable data structure, enabling a fundamentally more robust state management.

In principle, you can use Vike with any store. For example:

Initial state

When using a store, your components don't access fetched data directly: your components only access the store.

Integration example:

  1. Get the initial SSR state of the store and make it available as pageContext.initialStoreState.

    For example in onAfterRenderHtml(), or onRenderHtml() if you don't use vike-react/vike-vue/vike-solid.

    See also: API > pageContext > Custom.

  2. Make pageContext.initialStoreState available on the client-side.

    See API > passToClient.

  3. Initialize your data fetching tool on the client-side with pageContext.initialStoreState.

    For example in onBeforeRenderClient(), or onRenderClient() if you don't use vike-react/vike-vue/vike-solid.

See also