前端框架和库：Svelte：Svelte商店与上下文API.docxVIP

PAGE1

PAGE1

前端框架和库：Svelte：Svelte商店与上下文API

1Svelte商店简介

1.1Svelte商店的概念

Svelte商店是Svelte框架中用于状态管理的一种机制。它允许你创建可共享的状态，这些状态可以在组件之间传递，使得状态管理更加简单和直观。Svelte商店分为三种类型：可读商店、可写商店和读写商店，每种类型都有其特定的使用场景和功能。

1.1.1可读商店

可读商店（ReadableStores）是只读的状态，这意味着你只能从它们中获取状态，但不能直接修改状态。它们通常用于将状态从父组件传递给子组件，或者在多个组件之间共享状态，但这些组件都不需要修改状态。

1.1.1.1创建和使用可读商店

//创建可读商店

import{readable}fromsvelte/store;

constcount=readable(0,(set)={

letcurrentCount=0;

constinterval=setInterval(()={

currentCount++;

set(currentCount);

},1000);

return()={

clearInterval(interval);

};

});

//使用可读商店

import{derived}fromsvelte/store;

import{count}from./countStore.js;

constdoubleCount=derived(count,($count)=$count*2);

//在Svelte组件中订阅可读商店

script

import{count}from./countStore.js;

import{doubleCount}from./doubleCountStore.js;

letcurrentCount;

letcurrentDoubleCount;

constunsubscribeCount=count.subscribe((value)={

currentCount=value;

});

constunsubscribeDoubleCount=doubleCount.subscribe((value)={

currentDoubleCount=value;

});

//清除订阅

on:destroy=()={

unsubscribeCount();

unsubscribeDoubleCount();

};

/script

p当前计数:{currentCount}/p

p双倍计数:{currentDoubleCount}/p

1.1.2可写商店

可写商店（WritableStores）允许你读取和修改状态。它们非常适合用于管理那些需要在多个组件中读取和更新的状态。

1.1.2.1创建和使用可写商店

//创建可写商店

import{writable}fromsvelte/store;

constmessage=writable(Hello,Svelte!);

//使用可写商店

script

import{message}from./messageStore.js;

functionupdateMessage(){

message.set(你好，Svelte!);

}

/script

buttonon:click={updateMessage}更新消息/button

!--在组件中显示消息--

p{message}/p

1.1.3读写商店

读写商店（ReadableWritableStores）结合了可读商店和可写商店的功能，既可以在组件中读取状态，也可以更新状态。在Svelte中，writable和readable的组合可以实现读写商店的功能，但更常见的是直接使用writable，因为它同时提供了读取和写入的能力。

1.1.3.1创建和使用读写商店

//创建读写商店

import{writable}fromsvelte/store;

constuser=writable({

name:JohnDoe,

age:30

});

//使用读写商店

script

import{user}from./userStore.js;

functionupdat