Pinia 的 state 必须用无参箭头函数返回普通对象，不可直接写对象或返回 ref/reactive；需用 TypeScript 显式定义类型，并通过 storeToRefs 解构以保持响应式。
Pinia 中的 State 是响应式数据的源头，声明方式简单但有明确规范：必须用箭头函数返回一个普通对象（不能直接 return ref 或 reactive），Pinia 内部会自动将其转为响应式。
基础声明写法
在 defineStore 的配置中，state 是一个无参箭头函数，返回初始状态对象：
- ✅ 正确写法：
state: () => ({ count: 0, name: '', items: [] }) - ❌ 错误写法：
state: { count: 0 }（缺少函数包裹，无法重置） - ❌ 错误写法：
state: () => ref({ count: 0 })（重复包装，破坏 Pinia 自动管理）
类型定义要显式写出
使用 TypeScript 时，state 的结构应通过接口或类型别名明确定义，并在 defineStore 泛型中体现：
- 定义
interface CounterState { count: number; title: string } - 在 store 中写：
defineStore<'counter', CounterState>(...) - 这样既能获得编辑器智能提示，也能确保
store.count的类型安全
常见值的初始化技巧
对可能为 null、undefined 或需从 localStorage 恢复的字段，应在 state 函数内完成判断：
token: localStorage.getItem('token') ?? ''user: JSON.parse(localStorage.getItem('user') ?? 'null') as User | null-
cartItems: [] as CartItem[]（避免类型推断为 any[]）
注意解构后的响应式丢失问题
在组件中直接解构 store 的 state 属性（如 const { count } = store）会失去响应式。正确做法是：
- 用
storeToRefs(store)提取响应式引用：const { count } = storeToRefs(store) - 或直接访问
store.count（推荐，语义清晰且响应式保持）
