import { createStore } from 'stan-js' export const { useStore, getState, actions, effect } = createStore({ counter: 0,})
---import { getState } from '../store'--- <section class="astro"> <img src="/astro.svg" alt="Astro" /> <h1> Astro Counter </h1> <p id="counter"> {getState().counter} </p> <div> <button id='decrement'> - </button> <button id='increment'> + </button> </div></section> <script> import { actions, effect } from '../store' const p = document.querySelector('#counter') document.querySelector('#decrement')?.addEventListener('click', () => actions.setCounter(prev => prev - 1)) document.querySelector('#increment')?.addEventListener('click', () => actions.setCounter(prev => prev + 1)) effect(({ counter }) => { if (p) { p.textContent = counter.toString() } })</script>
import { useStore } from '../store' export const ReactCounter = () => { const { counter, setCounter } = useStore() return ( <section className="react"> <img src="/react.svg" alt="React" /> <h1> React Counter </h1> <p> {counter} </p> <div> <button onClick={() => setCounter(prev => prev - 1)}> - </button> <button onClick={() => setCounter(prev => prev + 1)}> + </button> </div> </section> )}