Svelte Store

可写 Store

创建

import {writable} from 'svelte/store';
 
export const user = writable({
	username: '',
	name: '',
	email: ''
})

使用 get 获取

import { get } from 'svelte/store';
import { user } from '$lib/store/user.store';
 
const value = get(user);

使用 subscribe 订阅获取

import { user } from '$lib/store/user.store';
 
let userValue;
 
const unsubscribe = user.subscribe((value) => {
	userValue = value;
});
 
$effect(() => {
	return unsubscribe();
})

通过 $ 简写(自动订阅和卸载)

import { user } from '$lib/store/user.store';
 
<div>{$user.username}</div>

更新 Store

import { user } from '$lib/store/user.store';
 
user.set({
	username: '',
	name: '',
	email: ''
});
 
user.update(value => ({
	...value,
	email: ''
}))

只读Store

import { readable } from 'svelte/store';
 
const user = readable({
	name: 'User'
});
 
// readable store 只能读取
const unsubscribe = user.subscribe(v => v);

Derived 存储

derived 是一个基于一个或者多个现有 store 创建的派生 store。当任何一个源 store 更新时，派生 store 的值会自动更新计算。派生 store 通常用于从现有 store 中计算出一些衍生数据，而不需要手动监听和更新。

• 源store： 一个或者多个现有的 Svelte store(writeable 或者 readable)
• 拍生活 store: 一个新的 store，其值是从 源 store 派生出来的。它会自动响应源 store 的变化。

<script>
  import { writable, derived } from 'svelte/store';
 
  // 创建源 store
  const count = writable(0);
 
  // 创建派生 store
  const doubleCount = derived(count, $count => $count * 2);
 
  // 更新源 store 的值
  function increment() {
    count.update(n => n + 1);
  }
</script>
 
<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>
<p>Double Count: {$doubleCount}</p>

自定义 Store

import { writable } from 'svelte/store';
 
function createCount() {
	const { subscribe, set, update } = writable(0);
 
	return {
		subscribe,
		increment: () => update((n) => n + 1),
		decrement: () => update((n) => n - 1),
		reset: () => set(0)
	};
}
 
export const count = createCount();
 

使用

<script>
	import { count } from './stores.js';
</script>
 
<h1>The count is {$count}</h1>
 
<button on:click={count.increment}>+</button>
<button on:click={count.decrement}>-</button>
<button on:click={count.reset}>reset</button>