状态管理 Pinia 与 Redux
组件多了以后会出现一类难题：两个互不相邻的组件要共享同一份数据（如登录用户、购物车）。用 props 一层层传递要穿过 N 个中间组件，又臭又长（prop drilling）。状态管理库把共享数据放到组件树之外的「全局仓库」，谁需要谁取，天然共享。
Pinia 是 Vue 官方推荐：用 defineStore 定义仓库，state 存数据、getters 算派生值、actions 写修改逻辑；任何组件里 useCounterStore() 拿到的都是同一份。Redux 是 React 生态的经典：核心三原则——单一数据源（一个全局 store）、state 只读（只能 dispatch action 触发修改）、纯函数 reducer 计算新 state。现代 React 更多直接用内置的 Context + useReducer 或轻量的 Zustand。
重要提醒：不是所有数据都该进全局仓库。组件私有的状态留在组件里，只有真正跨组件共享、需要集中管理的才提升到全局，否则仓库会变成混乱的垃圾场。
本节要点状态管理解决跨组件共享数据；Pinia：state/getters/actions；Redux：单一数据源 + 只读 + 纯函数 reducer；私有状态别放全局。
代码
// ---- Pinia（Vue 官方推荐）----
// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }), // 全局数据
getters: {
double: (state) => state.count * 2, // 派生值（有缓存）
},
actions: {
increment() { this.count++; }, // 修改数据的方法
},
});
// 任何组件：const store = useCounterStore(); store.increment();
// ---- Redux（React 生态经典）----
// 1. 定义 reducer 纯函数：根据旧 state + action 算新 state
// function reducer(state, action) { ... }
// 2. 派发动作：dispatch({ type: 'increment' })
// 3. 订阅更新：store.subscribe(render)
// 单一数据源 / state 只读 / 纯函数修改
