<script>
import {userStore, firstName, lastName} from './stores.js';
/* We would usually use the value binding, but we are here trying to
evaluate the lazy notifications of derived stores */
const handleFirstNameChange = (e) => {
userStore.update(u => {
u.firstName = e.target.value;
return u;
})
}
const handleLastNameChange = (e) => {
userStore.update(u => {
u.lastName = e.target.value;
return u;
})
}
/* With these lines we can see that changing the first name does not
notify $lastName of a change, even though both derived stores
come from the same store */
$: console.log('lastName changed', $lastName)
$: console.log('firstName changed', $firstName)
</script>
<input type="text" on:keydown={handleFirstNameChange} value={$firstName}/>
<input type="text" on:keydown={handleLastNameChange} value={$lastName}/>