Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

const counterStore = useCounterStore();
const userStore    = useUserStore();

// ── storeToRefs: reactive destructure ─────────
const { count, doubled, step } = storeToRefs(counterStore);
// Actions destructured directly (no storeToRefs needed)
const { increment, reset } = counterStore;

// ── $patch: batch update ──────────────────────
userStore.$patch({ name: 'Alice', age: 31 });

// $patch with callback (depends on current state)
counterStore.$patch((state) => {
  state.count += 10;
  state.step   = 2;
});

// ── Subscribe to store changes ─────────────────
counterStore.$subscribe((mutation, state) => {
  localStorage.setItem('counter', JSON.stringify(state));
});
</script>

<template>
  <p>Count: {{ count }} | Doubled: {{ doubled }} | Step: {{ step }}</p>
  <button @click="increment">+{{ step }}</button>
  <button @click="reset">Reset</button>
</template>