Pinia 的 actions 是处理业务逻辑的核心，支持同步修改 state 和 async/await 异步请求，天然响应式、类型安全；组件中统一通过 store.actionName() 调用，需注意避免直接修改参数、未清理副作用等误区。

Pinia 的 actions 是处理业务逻辑的核心位置，既能写同步操作，也能直接写异步请求，不需要像 Vuex 那样拆分成 mutations 和 actions 两层。它天然支持 this 访问整个 store 实例，类型推导完整，调用清晰。

同步逻辑：直接修改 state

同步操作就是立即更新 state 中的值，比如表单重置、计数器加减、切换开关状态等。写法简洁，无需额外函数封装。

• 在 actions 中通过 this.xxx = newValue 直接赋值，响应式自动生效
• 避免直接解构 state 属性再赋值（如 const { count } = this；count++），会导致失去响应性
• 可复用其他 action 或 getter，例如 this.increment() 调用另一个 action

异步逻辑：await + 状态更新

发起 API 请求后更新状态是最常见场景。Pinia 的 action 原生支持 async/await，请求完成后再修改 state，逻辑集中、可读性强。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 使用 await 等待 Promise 完成，再更新 this 上的属性
• 错误应捕获并做相应处理（如清空 token、提示用户），避免未 catch 导致静默失败
• 可在同一个 action 内组合多个异步步骤，比如先登录、再拉取用户信息、最后设置全局权限

调用方式：组件中统一入口

无论同步还是异步 action，在组件里都用相同方式触发，保持调用一致性。

立即学习“前端免费学习笔记（深入）”；

• 通过 store.actionName(...args) 直接调用，支持传参
• 异步 action 返回 Promise，可用 .then 或 await 处理后续逻辑（如跳转、弹窗）
• 推荐配合 storeToRefs 解构响应式数据，避免丢失响应性

注意事项：避免常见误区

写 action 时几个关键细节会影响稳定性和可维护性。

• 不要在 action 中直接修改传入的对象参数，应深拷贝或结构赋值后再操作
• 避免在 action 里写副作用过重的代码（如定时器未清理、addEventListener 未 remove），建议封装到单独函数中管理
• 复杂流程建议拆分为多个细粒度 action，便于单元测试和复用