State and Resumable Handlers
Lab-backed example: pages/state.vue · Open the live page
The lab keeps a counter, a configurable step and a status message in useState() values. Four buttons mutate that state through normal template handlers. This makes the page useful for checking both state serialization and interaction-time handler loading.
Minimal pattern
<script setup lang="ts">
const count = useState('lab-count', () => 0)
const step = useState('lab-step', () => 1)
function increment() {
count.value = count.value + step.value
}
function reset() {
count.value = 0
step.value = 1
}
</script>
<template>
<p>Counter: {{ count }}</p>
<p>Step: {{ step }}</p>
<button @click="increment">Increment</button>
<button @click="reset">Reset</button>
</template>Multiple values can participate in one handler
A resumable handler is not limited to one state key. The lab increments count using the current step, then updates a message that explains what happened. Keep the state required by an interaction serializable so Resux can reconstruct the handler scope correctly.
const message = useState(
'lab-message',
() => 'First click loads this page handler chunk.'
)
function increment() {
count.value = count.value + step.value
message.value = 'Incremented with resumable @click.'
}What to inspect in DevTools
- Load the page without clicking a control.
- Open Network and filter JavaScript requests.
- Click Increment for the first time.
- Inspect the generated handler/module request associated with that interaction.
- Click again and verify the visible bindings update without replacing the whole page.
The lab itself includes this manual QA instruction because the important behavior is not only the final counter value—it is when browser code is loaded and how much DOM work follows the interaction.
Resux state vs Vue reactivity
For Vue-owned ref(), reactive(), computed() and watchers, see the Reactivity API and Vue Islands. The Resux Lab also has a dedicated pages/features/reactivity.vue regression page for Vue reactivity. Do not treat a Vue runtime example as proof that the same work is handled by Resux resumability.