shared-zustand 项目教程

1. 项目的目录结构及介绍

shared-zustand 是一个用于在浏览器标签页间共享状态的库，基于 Zustand 状态管理库。以下是项目的目录结构：

shared-zustand/
├── example/             # 示例代码目录
│   ├── src/             # 示例源代码
│   │   ├── index.ts     # 示例入口文件
│   │   └── store.ts     # 示例状态存储文件
│   └── ...              # 其他示例相关文件
├── src/                 # 源代码目录
│   ├── index.ts         # 主入口文件
│   ├── share.ts         # 核心共享逻辑
│   └── ...              # 其他源代码文件
├── .gitignore           # Git 忽略文件
├── LICENSE              # 项目许可证文件
├── README.md            # 项目说明文件
├── package-lock.json    # 包锁定文件
└── package.json         # 包配置文件

• example/：包含示例代码，用于展示如何使用 shared-zustand。
• src/：存放 shared-zustand 的源代码。
• .gitignore：指定 Git 忽略的文件和目录。
• LICENSE：项目的开源许可证。
• README.md：项目的说明文档，包含了项目的介绍和如何使用。
• package-lock.json：锁定项目的依赖版本，确保构建的可重复性。
• package.json：项目的配置文件，定义了项目的依赖、脚本和元数据。

2. 项目的启动文件介绍

项目的启动主要是通过示例目录 example/ 中的 index.ts 文件来实现的。以下是 index.ts 的基本内容：

import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
import { share } from 'shared-zustand';

// 创建 Zustand 存储
const useStore = create(subscribeWithSelector((set) => ({
  count: 1,
})));

// 共享状态
if ("BroadcastChannel" in globalThis) {
  share("count", useStore);
}

// 使用存储
useStore.setState((count) => ({ count: count + 1 }));

这个文件演示了如何创建一个 Zustand 存储，并使用 shared-zustand 将状态共享到其他标签页。

3. 项目的配置文件介绍

项目的配置主要通过 package.json 文件来管理。以下是 package.json 的一些基本配置：

{
  "name": "shared-zustand",
  "version": "1.0.0",
  "description": "cross-tab state sharing for zustand",
  "main": "src/index.ts",
  "scripts": {
    "start": "ts-node example/src/index.ts",
    "build": "tsc"
  },
  "dependencies": {
    "zustand": "^4.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0",
    "ts-node": "^10.0.0"
  }
}

在 scripts 部分，定义了两个脚本：

• start：使用 ts-node 直接运行示例代码的入口文件 index.ts。
• build：使用 TypeScript 编译器 (tsc) 构建项目源代码。

通过运行 npm start 或 yarn start 可以启动示例项目，而 npm run build 或 yarn run build 可以编译项目源代码。