Svelte状态管理——svelte/store模块的使用

目录

前言

一、项目中使用示例

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(); // 停止订阅