Recently, I came into Svelte and ... I love it. Hi rocks, Sasha here. Today we are going to do some state management in Svelte. There are different ways of managing state in Svelte. In this tutorial, we are going to see how to create a mutable state by using a writable object. The project is going to be a simple page where you can add contacts into a list. So, let’s start by creating a svelte project: open your terminal, go to the target folder you want to create project in and run: npx svelte3-app Once it’s done, you can start a project by running: npm run dev It will deploy your app on and enable hot-reload. localhost:5000 Store Let’s create our store object under src/store and call it . contacts[.js] In there, we are going to define a default value for our store, create a store and expose addContact and reset methods. { writable } ; DEFAULT_CONTACTS = [
    { : , : , : },
    { : , : , : }
]; { subscribe, set, update } = writable(DEFAULT_CONTACTS); addContact = update( { [...contacts, contact];
}); reset = {
    set(DEFAULT_CONTACTS);
}; {
    subscribe,
    addContact,
    reset
} import from 'svelte/store' //value used as default for the current store const name "John" surname "Doe" mail "john.doe@mail.com" name "Alice" surname "Wonderland" mail "alice.wonderland@mail.com" // create a store // subscribe    -> must be exported, will discuss it in future article // set          -> allows you to set a value to store // update       -> receives a current store value as input and returns a new one. const //receives a new contact in input and updates current stored value by pushing a new one const => contact => contacts //we're returning a new array in order to achieve reactivity return // sets a default value to store const => () //public methods export default So, now we can import our contacts store into components, subscribe to it, add new entries and reset its value. Components We are going to create two components: , for inserting new contacts, and , for showing the list of stored contacts. ContactForm ContactsList ContactsList { #each $contacts as contact } {contact.name} {contact.surname} {contact.mail} { /each } < > script contacts ; import from "./store/contacts" </ > script < = > div id "contactsList" < > p </ > p < > p </ > p < /> hr </ > div This component will show all contacts and update automatically. You can explicitly subscribe to store, but it’s better to use $ as prefix to contacts. In this way, Svelte will manage subscription automatically. ContactsForm < > script contacts ; name = ; surname = ; mail = ; submitContact = {
		contacts.addContact({ name, surname, mail }); name = surname = mail = ;
	} import from "./store/contacts" // binding values let "" let "" let "" // submit contact const => () // reset values "" </ > script < = > div id "contactForm" < = = = /> input type "text" bind:value {name} placeholder "Insert name" < = = = /> input type "text" bind:value {surname} placeholder "Insert surname" < = = = /> input type "email" bind:value {mail} placeholder "Insert mail" < = = = /> input type "submit" on:click {submitContact} value "Add" < = = = /> input type "submit" on:click {contacts.reset} value "Reset" </ > div This component simply binds values and triggers submitContact on Add button press. App Now, you can import both components to App and let the magic happen. State managment! < > script ContactsList ; ContactForm ; import from "./ContactsList.svelte" import from "./ContactForm.svelte" </ > script < > main < > h1 </ > h1 < /> ContactForm < /> ContactsList </ > main

Target

Portfolio

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Svelte State Management: Creating Contact Form

Too Long; Didn't Read

Company Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Svelte State Management: Creating Contact Form

Too Long; Didn't Read

Company Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES