有时,您将需要多个不相关的组件或常规的JavaScript模块访问这些值。
在Svelte,我们通过store来做到这一点。store只是一种对象,该对象具有一种subscribe方法,该方法允许在store的value发生变化时通知订阅过的组件。
可写 store
通过 writable 方法可以创建一个可写store,传入两个参数value, start。
- value:初始值
- start:获得第一个订阅者时调用,拥有一个参数为set的回调。可以返回一个stop方法,该方法在最后一个订阅者退订时执行。
import { writable } from 'svelte/store';
export const count = writable(0,(set)=>{
console.log('subscribe count')
set(100)
return ()=>{
console.log('clear count')
}
});
可读store拥有三个方法:update 、set、subscribe。
- set: 设置value值。
- update: 更新value值,接受一个参数为value的方法,return一个新的value值。
function update(fn) {
set(fn(value));
}
- subscribe: 订阅该store,接受一个参数为value的方法,用于获得value值并进行处理。返回值为一个退订方法,执行该方法完成退订。
<script>
import { onDestroy } from "svelte";
import { count } from "../stores";
let count_value;
const unsubscribe = count.subscribe(value => {
count_value = value;
});
onDestroy(unsubscribe());
</script>
<h1>The count is {count_value}</h1>
<button
on:click={() => {
count.update(c => c - 1);
}}>
-
</button>
<button
on:click={() => {
count.update(c => c + 1);
}}>
+
</button>
<button
on:click={() => {
count.set(0);
}}>
reset
</button>
自动订阅
使用$进行自动订阅,自动订阅的store将在组件销毁时自动调用停止订阅方法。
<script>
import { onDestroy } from "svelte";
import { count } from "../stores";
</script>
<h1>The count is {$count}</h1>
<button
on:click={() => {
count.update(c => c - 1);
}}>
-
</button>
<button
on:click={() => {
count.update(c => c + 1);
}}>
+
</button>
<button
on:click={() => {
count.set(0);
}}>
reset
</button>
只读store
只读store就是没有暴露update、set方法的可写store。
import {
readable
} from 'svelte/store';
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
set(new Date());
}, 1000);
return function stop() {
clearInterval(interval);
};
});
<script>
import { time } from '../stores';
const formatter = new Intl.DateTimeFormat('en', {
hour12: true,
hour: 'numeric',
minute: '2-digit',
second: '2-digit'
});
</script>
<h1>The time is {formatter.format($time)}</h1>
派生store
您可以使用创建一个store,并且这个store基于其他一个或者多个store,可以使用派生store。
export const elapsed = derived(
time,
$time => Math.round(($time - start) / 1000)
);
derived接受三个参数:
- stores:可以为一个store对象,或者为一个数组。
- fn:接受一个方法包含两个参数values,set。如果stores为数组,values也为数组,如果stores为store对象,values为改store的value。如果没有set参数,派生store的value为fn的返回值,如果包含set参数可以使用set方法指定value值。
- initial_value:初始值(异步时使用)
绑定 store
如果store是可写的(即它具有set方法),则可以绑定其值,就像可以绑定到本地组件一样。
也可以通过直接赋值将value写进store。
<input bind:value={$count}>
<button on:click="{() => $count += 1}">
+ 1
</button>
本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn。