用处
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