目录
前言
一、项目中使用示例
1. 创建全局状态
2. 在组件中使用全局状态
3. 便捷使用技巧$
二、api介绍
1. writable
2. readable
3. derived
前言
在 Svelte 中，可以使用其自带的svelte/store模块来管理全局的应用程序状态，该模块导出用于创建可读、可写和派生存储的函数。该库提供了如 writable 和 readable 等函数，用于创建可写和只读的全局状态。
一、项目中使用示例
先举一个例子对store的使用有个整体感觉，下面再具体讲解各api函数。
1. 创建全局状态
比如创建一个count.js
import { writable } from 'svelte/store';
export const count = writable(0);
2. 在组件中使用全局状态
比如在Counter.svelte组件里使用
<script lang="ts">
import { count } from '$lib/stores/count';
let currentCount: number;
count.subscribe(value => {
currentCount = value;
});
function increment() {
count.update(n => n + 1);
}
function decrement() {
count.update(n => n - 1);
}
</script>
<h1>Count: {currentCount}</h1>
<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>
页面：
总结：
可以看到svelte/store模块的使用非常简单：在调用方法waritable储存数据后，在需要使用的组件去订阅它。
3. 便捷使用技巧$
刚才例子可以顺利运行，但是有个问题：数据已订阅（subscribe），但从未取消订阅。如果组件被多次实例化和销毁，就会导致内存泄漏。
所以应该取消订阅：
<script lang="ts">
// 新增
import { onDestroy } from 'svelte';
import { count } from '$lib/stores/count';
let currentCount: number;
// 修改
const unsubscribe = count.subscribe(value => {
currentCount = value;
});
function increment() {
count.update(n => n + 1);
}
function decrement() {
count.update(n => n - 1);
}
// 新增
onDestroy(unsubscribe);
</script>
<h1>Count: {currentCount}</h1>
<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>
不过如果每次使用都去取消订阅（通过unsubscribe）就很麻烦，于是Svelte有一个技巧——可以通过在store名称前加上 $ 来引用store的值：
<script lang="ts">
import { count } from '$lib/stores/count';
function increment() {
$count + 1
}
function decrement() {
$count - 1
}
</script>
<h1>Count: {$count}</h1>
<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>
是不是非常清爽了！项目开发时推荐这种写法！
二、api介绍
1. writable
writable(initialValue, start = () => {}, { subscribe, set, update })作用：
创建一个存储的函数，该存储具有可以从“外部”组件设置的值（不是必须要在store.js里面修改值，可以对比VueX必须在文件里面进行修改，组件不能修改理解）。因为它被创建就具有附加 set 和 update 方法的对象。
参数：
initialValue：状态的初始值。start：一个可选的回调函数，在订阅状态时立即执行。
返回的对象具有以下方法：
subscribe：订阅状态的变化。set(value)：设置状态的值为指定值。update(updater)：根据当前状态的值进行更新操作。
import { writable } from 'svelte/store';
// 创建一个可写状态
export const count = writable(0);
// 在组件中使用可写状态
count.set(10); // 设置状态的值为 10
count.update(n => n + 1); // 根据当前状态的值进行更新操作
注意：实际开发中，可以使用set或者update函数去修改状态，也可以通过$符像上面的例子一样直接修改。
2. readable
readable(initialValue, start = () => {}, options = {})作用：
创建一个只读状态，其值不能从“外部”设置。
参数：
initialValue：状态的初始值。start：一个可选的回调函数，在订阅状态时立即执行。options：可选的配置对象。
返回的对象具有以下方法：
subscribe：订阅状态的变化。
import { readable } from 'svelte/store';
// 创建一个只读状态
export const currentTime = readable(new Date(), function start(set) {
const interval = setInterval(() => {
set(new Date());
}, 1000);
return function stop() {
clearInterval(interval);
};
});
// 在组件中使用只读状态
const unsubscribe = currentTime.subscribe(value => {
console.log(value); // 订阅状态的变化并打印新值
});
unsubscribe(); // 停止订阅
3. derived
derived(dependencies, callback, initial_value = undefined)作用：
基于其他状态派生出新的状态，然后在存储依赖项发生更改时运行。
参数：
dependencies：一个或多个状态或派生状态的数组，作为回调函数的依赖。callback：一个回调函数，根据依赖的状态计算派生状态的值。initial_value：可选的初始值，在无法立即计算派生状态时使用。
返回的对象具有以下方法：
subscribe：订阅派生状态的变化。
import { writable, derived } from 'svelte/store';
// 创建一个可写状态
export const count = writable(0);
// 创建一个派生状态
export const isEven = derived(count, $count => $count % 2 === 0);
// 在组件中使用派生状态
const unsubscribe = isEven.subscribe(value => {
console.log(value); // 订阅派生状态的变化并打印新值
});
unsubscribe(); // 停止订阅
