<script> import {writable} from 'svelte/store'; const person = writable({name: 'Mark', zip: 63304});
function handleChange(event) {
const name = event.target.value;
person.set({...$person, name});
}
</script><input on:input={handleChange} value={$person.name} />
<div> Hello, {$person.name} at {$person.zip}! </div>
Of course if person is only used inside this component, you would not use a store. If it is used in other components, you would typically define and export the store in another .js file and import it everywhere it is needed.
My point is that this is a very simple way to share state between components and nowhere near as complex as the page you shared might indicate. That's because you do not need to use derived stores or custom stores. The simple writable store works in most cases.