为什么要用状态管理库？

在“面试克星”里使用者登录后导航栏需要显示使用者名。个人主页需要展示和编辑使用者资料，路由守卫需要判断登录状态。如果只用组件内部的 useState这些数据会在组件间传递得乱七八糟。说起来，我需要一个全局的、能让所有组件共享的使用者状态中心。

在 Vue 里我有 Pinia。在 React 里我选了 Zustand——它轻量、API 简单，而且和 Pinia 的心智模型非常接近。

Zustand vs Pinia：主要概念对照

最大的差异在于状态的更新方式。Pinia 借助 Vue 的响应式程序，你可以直接修改状态。Zustand 则遵循 React 的不可变数据原则，你必须通过 set返回一个新的状态对象。老实说，

我设计的 useUserStore

我的 Store 需要管理：

• ✓ 使用者信息✓ JWT Token ✓ 是否登录 ✓ 提供登录、注册、退出、更新信息方法 最关键的是这方面。TypeScript 接口定义成了我的自文档！

interface UserState {
说到user。{
说到_id，string;username: string;email: string;怎么说呢，...
} | null;token: string | null;
isLogin: boolean;话说回来，login: => Promise;怎么说呢，register: => Promise;loginOut: void;updateUser: Promise;}

从初始化痛点来看，从 localStorage 恢复登录态时总容易忘记同步 isLogin!

typescript
// 初始化时一定要同时设置 token 和 isLogin!const initialState = {
user这方面，JSON.parse)。token: localStorage.getItem,isLogin:
Boolean)
};

刚开始写TS时常被接口定义吐槽："每次都要重复写这么多字段太麻烦!"直到...


// 某个组件中意外写错属性名时:
const username = useUserStore;// ↳ TS报错，应该是 user.name



// 接口成了前端最强防呆机制!interface User {
从name来看，string;// 没加username字段
再看age?，number，// age是可选项
}


后来发现的观点是，TypeScript接口不是额外负担。而是帮你避免运行时错误的"编译器守护神"