svelte - 4. store

用处

store 中的变量可以在不同组件中使用，实现跨组件通信

API

API	作用	使用方法	备注
/	获取值	import {count} from store.js	引入在 store.js中注册的变量 count
set	设置值	count.set(val)	接收一个值，直接将count设置为该值
update	更新值	count.update(n => n + 1)	接收一个参数，n表示当前count的值，将当前这个值进行操作
subscribe	订阅变量变化	count.subscribe(value => {count_value = value })	1、接受一个函数，订阅这个count变量的变化；2、需要在onDestroy生命周期销毁订阅，以免组件被实例化并多次销毁造成内存泄漏
$xxx	自动订阅	等同于 subscribe + 在 onDestroy 中

1、set、update、subscribe、取消订阅

示例
有A、B、C三个组件，都用到了 count 变量，现在把 count 变量存到 store 中三个组件都可以使用。

A: 点button，count+1；(update)
B：点button，count-1；(update)
C: 点button，count 重置为 0；(set)
主

（1）store.js — 注册 count 变量

import {
    writable } from 'svelte/store';
export const count = writable(0);

（2）A.svelte — 点button，count+1(update)

<script>
	import {
    count } from './stores.js'; // 引入 store 中变量 count
	function increment() {
   
		count.update(n => n+1) // 修改并更新 count 的值
	}
</script>

<button on:click={
   increment}>
	+
</button>

（3）B.svelte — 点button，count-1(update)

<script>
	import {
    count } from './stores.js';

	function decrement() {
   
		count.update(n => n-1)
	}
</script>

<button on:click={
   decrement}>
	-
</button>

（4）C.svelte — 点button，count 重置为 0(set)

<script>
	import {
    count } from './stores.js';

	function reset() {
   
		count.set(0)
	}
</script