Svelte状态管理：创建联系表

最近，我来到了斯维尔特，...我喜欢它。

嗨，岩石，萨沙在这里。 今天，我们将在斯维尔特进行一些状态管理。

斯维尔特（Svelte）有多种管理状态的方法。 在本教程中，我们将了解如何使用可写对象创建可变状态。

该项目将是一个简单的页面，您可以在其中将联系人添加到列表中。

因此，让我们开始创建一个苗条的项目：打开终端，转到要在其中创建项目的目标文件夹并运行：

npx svelte3-app

完成后，您可以运行以下命令来启动项目：

npm run  dev

它将在localhost:5000上部署您的应用程序并启用热重载。

商店

让我们在src / store下创建store对象，并将其称为contacts[.js] 。

在这里，我们将为商店定义一个默认值，创建一个商店并公开addContact和reset方法。

import { writable } from 'svelte/store' ;

//value used as default for the current store
const DEFAULT_CONTACTS = [
    { 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 { subscribe, set, update } = writable(DEFAULT_CONTACTS);

//receives a new contact in input and updates current stored value by pushing a new one
const addContact = contact => update( contacts => {
    //we're returning a new array in order to achieve reactivity
    return [...contacts, contact];
});

// sets a default value to store
const reset = () => {
    set(DEFAULT_CONTACTS);
};

//public methods
export default {
    subscribe,
    addContact,
    reset
}

因此，现在我们可以将联系人存储导入到组件中，对其进行订阅，添加新条目并重置其值。

组件

我们将创建两个组件： ContactForm （用于插入新的联系人）和ContactsList （用于显示存储的联系人列表）。

联系人列表

< script > 
	import contacts from "./store/contacts" ;
 </ script >

< div id = "contactsList" >
	{ #each $contacts as contact }
		< p > {contact.name} {contact.surname} </ p >
		< p > {contact.mail} </ p >
		< hr />
	{ /each }
</ div >

该组件将显示所有联系人并自动更新。 您可以显式订阅store，但最好使用$作为联系人的前缀。 这样，Svelte将自动管理订阅。

联系人表格

< script > 
	import contacts from "./store/contacts" ;

	// binding values
	let name = "" ;
	let surname = "" ;
	let mail = "" ;

	// submit contact
	const submitContact = () => {
		contacts.addContact({ name, surname, mail });
		// reset values
		name = surname = mail = "" ;
	}
 </ 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 >

该组件仅绑定值并在“添加”按钮按下时触发submitContact。

应用程式

现在，您可以将两个组件都导入到App中，让魔术发生。

< script > 
	import ContactsList from "./ContactsList.svelte" ;
	import ContactForm from "./ContactForm.svelte" ;
 </ script >

< main >
	< h1 > State managment! </ h1 >
	< ContactForm />
	< ContactsList />
</ main >

From: https://hackernoon.com/svelte-state-management-creating-contact-form-2t7y366h