这一章里，把状态管理看成“城市台账系统”。数据谁来记、谁能改、改完谁知道，这就是状态管理真正解决的问题。
小项目里，组件自己记状态就够了。
但一旦城市变大，你就会碰到：
- 多个组件要看同一份数据
- 一次操作要影响多个区域
- 你需要调试“是谁改了状态”
#Redux Toolkit —— 市政总指挥中心
const counter = createSlice({
name: 'counter',
initialState: 0,
reducers: {
inc: (state) => state + 1,
},
});Redux Toolkit 适合：
- 中大型 React 应用
- 多人协作
- 需要强约束、强追踪
#Zustand —— 小区物业群
const useBearStore = create((set) => ({
bears: 0,
inc: () => set((s) => ({ bears: s.bears + 1 })),
}));Zustand 的特点是：
- 轻
- 快
- 少样板
适合：
- React 项目的客户端共享状态
- 中小型全局状态
#Pinia —— Vue 城官方政务大厅
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++;
},
},
});Pinia 是 Vue 官方推荐路线里的状态管理答案。
状态管理速查：
| 技术 | 更适合 |
|---|---|
| Redux Toolkit | 大团队、大项目、强约束 |
| Zustand | React 中小项目、低心智负担 |
| Pinia | Vue 中大型项目 |
很多人以为“全局状态越多越专业”，其实不是。能放局部 state 的，就别先搬去市政总台账。