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，便于单元测试和复用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
