# @friendofsvelte/state 中文文档

规范地址：https://npmcn.com/package/%40friendofsvelte/state/

版本：0\.2\.0
npm 元数据更新时间：2026-02-10T06:17:15.710Z
中文译文更新时间：2026-11-15T14:15:22.392Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40friendofsvelte/state
原文对照：https://npmcn.com/package/%40friendofsvelte/state/?lang=original
项目主页：https://github.com/friendofsvelte/state#readme
源码仓库：https://github.com/friendofsvelte/state

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：10.9 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：svelte ^5\.0\.0
- 首次发布：2025-02-14T17:14:09.178Z
- 最新版本发布：2026-02-10T06:17:15.567Z
- 近 30 天下载量：3586（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 1 个）

## 中文简介

持续 Svelte 5 州、 地层和会话

## 安装

```sh
npm install @friendofsvelte/state
```

也可以使用：`pnpm add @friendofsvelte/state`、`yarn add @friendofsvelte/state`、`bun add @friendofsvelte/state`

## README

# 持久性斯维尔特5州

一个轻量级,类型安全的Svelte应用程序管理解决方案,具有内置存储持久性.

## 特征

-   🎯 **类型安全**: 带有自动类型推论的完整类型脚本支持
-   💾 **持久性存储**: 本地Storage 或会话中自动状态持续
-   🪶 **轻巧**: 斯韦尔特以外的零依赖性
-   ⚡ **反应**: 与斯维尔特反应系统的无缝集成
-   🔄 **自动同步**: 自动同步各个组件的状态
-   📦 **简单 API**: 只有一个功能来管理您的状态需求

## 安装

```bash
npm install @friendofsvelte/state
```

## 快速启动

1.  使用 `PersistentState`数字 :

```typescript
// new.svelte.ts / js
import { PersistentState } from '@friendofsvelte/state';

export const box = new PersistentState(
    'box',
    {
        color: '#ff3e00',
        dimensions: [100, 100]
    },
    'sessionStorage'
);
```

2.  在组件中使用 :

```svelte
<script lang="ts">
    import { box } from '$lib/new.svelte';

    const listColors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];

    function switchNextColor() {
        const currentIndex = listColors.indexOf(box.current.color);
        const nextIndex = currentIndex + 1;
        if (nextIndex >= listColors.length) {
            box.current.color = listColors[0];
        } else {
            box.current.color = listColors[nextIndex];
        }
    }
</script>

<div
    style="background-color: {box.current
        .color}; width: 100px; height: 100px; color: gray; text-align: center;"
    class="m-2 rounded-2xl"
>
    {box.current.color}
</div>

<button onclick={switchNextColor} class="m-2 rounded-2xl bg-gray-700 px-3 text-gray-200">
    Change color
</button>
```

## API 参考

### `PersistentState<T>(key: string, initial?: T, storageType: StorageType = 'localStorage')`

创建或检索持久性状态容器.

参数:

-   `key`: 国家容器的独特标识符
-   `initial`: (可选) 初始状态值
-   `storageType`: (可选) 存储类型 - “ localStorage” 或“ sessionStorage” (默认: “localStorage” )

回返情况:

-   类型反应状态对象 `T`

> 根据,富豪哈里斯' [本地存储测试](https://github.com/Rich-Harris/local-storage-test/blob/main/src/lib/storage.svelte.ts)

## 实例

### 基本用途

```svelte
<script lang="ts">
    import { PersistentState } from '@friendofsvelte/state';

    const box = new PersistentState(
        'box',
        {
            color: '#ff3e00',
            dimensions: [100, 100]
        },
        'sessionStorage'
    );

    function switchNextColor() {
        const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];
        const currentIndex = colors.indexOf(box.current.color);
        box.current.color = colors[(currentIndex + 1) % colors.length];
    }
</script>

<div
    style="background-color: {box.current
        .color}; width: 100px; height: 100px; color: gray; text-align: center;"
    class="m-2 rounded-2xl"
>
    {box.current.color}
</div>

<button onclick={switchNextColor} class="m-2 rounded-2xl bg-gray-700 px-3 text-gray-200">
    Change color
</button>
```

## 捐款

欢迎捐款! 请随意提交 [拉请求](https://github.com/friendofsvelte/state/pulls)。 。 。 .

## 许可证

麻省理工学院许可证 - 详情见LICENSE文件

## 常见问题

### @friendofsvelte/state 是什么？

持续 Svelte 5 州、 地层和会话

### 如何安装 @friendofsvelte/state？

在项目目录运行 npm install @friendofsvelte/state，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @friendofsvelte/state 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @friendofsvelte/state 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @friendofsvelte/state 可以商用吗？

@friendofsvelte/state 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @friendofsvelte/state 的下载量有多少？

根据 npm 官方下载统计，@friendofsvelte/state 在 2026/10/16 – 2026/11/14 这 30 天内被下载 3,586 次，日均约 120 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @friendofsvelte/state 还在维护吗？

最新版本 0\.2\.0 发布于 2026/02/10（9 个月前）；至今共发布 9 个版本，其中过去 12 个月发布了 1 个；首次发布于 2025/02/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。