一、Pinia 核心优势
相比 Vuex，Pinia 主要改进：
- 移除 Mutations：无需区分
mutation（同步）和 action（异步），统一用 action 处理所有逻辑（同步 / 异步均可），简化代码。
- 更好的 TypeScript 支持：天生支持类型推导，无需额外类型声明。
- 更简洁的 API：减少模板代码，使用更直观。
- 无模块嵌套：通过多个独立 Store 替代 Vuex 的
modules，结构更扁平。
- 兼容 Vue 2/3：同时支持 Options API 和 Composition API。
Pinia 的核心是 Store（仓库），一个 Store 包含以下部分：
- State：存储响应式状态（类似组件的
data）。
- Getters：基于 State 派生的计算属性（类似组件的
computed）。
- Actions：处理业务逻辑（类似组件的
methods，支持同步 / 异步）。
在项目入口文件（如 main.ts）中创建 Pinia 实例并挂载到 Vue 应用：
使用 defineStore 函数创建 Store，需指定唯一 ID（用于 devtools 识别）。
示例：创建一个计数器 Store
在组件中导入并调用 Store 函数，即可获取 Store 实例（注意：Store 实例是响应式的，不能直接解构，需用 storeToRefs 保持响应式）。
示例组件：
- 访问 State：直接通过
store.xxx 访问（如 counterStore.count）。
- 修改 State：
- 直接赋值：
counterStore.count = 10
- 批量修改（推荐，减少响应式更新次数）：
函数式批量修改（复杂逻辑）：
重置 State：若 state 是函数返回的对象，可通过 $reset 重置为初始值：
- Getters 会被缓存（类似
computed），仅当依赖的 state 变化时才重新计算。
- 可接收参数（通过返回函数实现）：
- 组件中使用：
counterStore.getCountByNum(5)（返回 count + 5）。
- Actions 可通过
this 访问当前 Store 的 state、getters 和其他 actions。
- 可调用其他 Store 的方法（需先导入并实例化其他 Store）：
Pinia 是 Vue 生态中更现代、更简洁的状态管理方案，通过移除冗余概念（如 mutations）和优化 API，大幅降低了使用成本。无论是小型项目还是大型应用，都推荐使用 Pinia 替代 Vuex 进行状态管理。
