Zustand 中的 set 函数有几种使用方式？

Zustand 中的 set 函数主要有两种使用方式：

1. 直接设置新状态

javascript
const useStore = create((set) => ({
  count: 0,
  increment: () => set({ count: 1 }) // 直接设置新值
}));

2. 使用函数式更新

javascript
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })) // 基于当前状态更新
}));

区别：

直接设置新状态：

• 适用于不需要依赖当前状态的更新
• 语法更简洁
• 示例：set({ user: newUser })

函数式更新：

• 适用于需要基于当前状态进行更新的场景
• 可以确保获取到最新的状态值
• 避免闭包陷阱问题
• 示例：set((state) => ({ count: state.count + 1 }))

使用建议：

• 当更新不依赖当前状态时，使用直接设置方式
• 当更新需要基于当前状态时，使用函数式更新方式
• 在异步操作中，推荐使用函数式更新或配合 get() 使用

示例对比：

javascript
// 不推荐：在异步操作中直接设置
const incrementAsync = async () => {
  await delay(1000);
  set({ count: count + 1 }); // 可能获取到旧的 count 值
};

// 推荐：使用函数式更新
const incrementAsync = async () => {
  await delay(1000);
  set((state) => ({ count: state.count + 1 })); // 总是获取最新值
};

​