zustand-kit 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
|
|
17
17
|
## 📦 安装
|
|
18
18
|
|
|
19
|
-
yarn add zustand-x zustand
|
|
20
19
|
```bash
|
|
21
20
|
npm install zustand-kit zustand
|
|
22
21
|
# 或
|
|
@@ -49,7 +48,7 @@ function Counter() {
|
|
|
49
48
|
### 对象状态（支持部分更新）
|
|
50
49
|
|
|
51
50
|
```tsx
|
|
52
|
-
import { useGlobalState } from 'zustand-
|
|
51
|
+
import { useGlobalState } from 'zustand-kit';
|
|
53
52
|
|
|
54
53
|
function UserProfile() {
|
|
55
54
|
const [user, setUser, resetUser] = useGlobalState('user', {
|
|
@@ -75,7 +74,7 @@ function UserProfile() {
|
|
|
75
74
|
### 持久化状态
|
|
76
75
|
|
|
77
76
|
```tsx
|
|
78
|
-
import { useGlobalState } from 'zustand-
|
|
77
|
+
import { useGlobalState } from 'zustand-kit';
|
|
79
78
|
|
|
80
79
|
function Settings() {
|
|
81
80
|
// 使用 localStorage 持久化
|
|
@@ -109,7 +108,7 @@ function Settings() {
|
|
|
109
108
|
### 选择器模式（性能优化）
|
|
110
109
|
|
|
111
110
|
```tsx
|
|
112
|
-
import { useGlobalSelector } from 'zustand-
|
|
111
|
+
import { useGlobalSelector } from 'zustand-kit';
|
|
113
112
|
|
|
114
113
|
function UserName() {
|
|
115
114
|
// 仅订阅 user.name，其他字段变化不会触发重渲染
|
|
@@ -129,7 +128,7 @@ function UserEmail() {
|
|
|
129
128
|
### 仅获取 Setter（不订阅状态）
|
|
130
129
|
|
|
131
130
|
```tsx
|
|
132
|
-
import { useGlobalSetter } from 'zustand-
|
|
131
|
+
import { useGlobalSetter } from 'zustand-kit';
|
|
133
132
|
|
|
134
133
|
function IncrementButton() {
|
|
135
134
|
// 只获取 setter，不订阅状态变化（不会重渲染）
|
|
@@ -145,7 +144,7 @@ function IncrementButton() {
|
|
|
145
144
|
|
|
146
145
|
## 🔧 非 React 环境使用
|
|
147
146
|
|
|
148
|
-
zustand-
|
|
147
|
+
zustand-kit 提供了独立的 API，可以在非 React 组件中使用：
|
|
149
148
|
|
|
150
149
|
```typescript
|
|
151
150
|
import {
|
|
@@ -153,7 +152,7 @@ import {
|
|
|
153
152
|
setGlobalState,
|
|
154
153
|
subscribeGlobalState,
|
|
155
154
|
resetGlobalState
|
|
156
|
-
} from 'zustand-
|
|
155
|
+
} from 'zustand-kit';
|
|
157
156
|
|
|
158
157
|
// 获取状态
|
|
159
158
|
const count = getGlobalState<number>('counter');
|
|
@@ -226,7 +225,7 @@ resetGlobalState('counter');
|
|
|
226
225
|
|
|
227
226
|
## 🎨 TypeScript 支持
|
|
228
227
|
|
|
229
|
-
zustand-
|
|
228
|
+
zustand-kit 使用 TypeScript 编写，提供完整的类型推断：
|
|
230
229
|
|
|
231
230
|
```typescript
|
|
232
231
|
// 自动推断类型
|
|
@@ -255,7 +254,7 @@ const [user, setUser] = useGlobalState<User>('user', {
|
|
|
255
254
|
|
|
256
255
|
## 🤝 对比其他方案
|
|
257
256
|
|
|
258
|
-
| 特性 | zustand-
|
|
257
|
+
| 特性 | zustand-kit | Zustand | Redux | Context API |
|
|
259
258
|
|------|-----------|---------|-------|-------------|
|
|
260
259
|
| 学习曲线 | ⭐️ 简单 | ⭐️⭐️ 较简单 | ⭐️⭐️⭐️ 复杂 | ⭐️⭐️ 中等 |
|
|
261
260
|
| 包体积 | 极小 | 小 | 大 | 无 |
|
|
@@ -286,8 +285,8 @@ MIT
|
|
|
286
285
|
|
|
287
286
|
## 🔗 链接
|
|
288
287
|
|
|
289
|
-
- [GitHub](https://github.com/leonwgc/zustand-
|
|
290
|
-
- [Issues](https://github.com/leonwgc/zustand-
|
|
288
|
+
- [GitHub](https://github.com/leonwgc/zustand-kit)
|
|
289
|
+
- [Issues](https://github.com/leonwgc/zustand-kit/issues)
|
|
291
290
|
- [Zustand](https://github.com/pmndrs/zustand)
|
|
292
291
|
|
|
293
292
|
## 👨💻 作者
|
package/package.json
CHANGED