Pinia 的 actions 是业务逻辑核心，统一处理同步修改和异步操作；同步时直接通过 this 修改响应式 state，异步时用 async/await 管理副作用并实时更新状态，支持内部调用其他 action 或 getter，组件中须保持 this 上下文调用。
Pinia 的 actions 是编写业务逻辑的核心位置，它统一处理同步修改和异步操作，不再像 Vuex 那样拆分为 mutations 和 actions。写法简洁、语义清晰，且天然支持响应式更新。
同步 action：直接修改 state
在 action 函数内部，通过 this 访问并修改 state 中的属性。所有 state 属性都是响应式的，修改后会自动触发视图更新。
- state 必须用函数返回（如
state: () => ({ count: 0 })），确保每次创建 store 实例时获得独立响应式对象 - action 内直接赋值即可，比如
this.count++或this.user = data - 不需 return，也不用 commit，没有额外封装层
异步 action：配合 await/async 处理副作用
发起 API 请求、定时器、文件读取等异步任务时，把逻辑写在 action 中，并用 async/await 管理流程。过程中可实时更新 loading、error、data 等状态。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 推荐在请求前设
this.loading = true，结束后设this.loading = false - 错误统一捕获，存入
this.error，便于组件判断和展示 - 成功后直接赋值给 state，如
this.items = response.data - 避免在组件中写 fetch，保持逻辑内聚
action 中调用其他 action 或 getter
同一个 store 内，action 可以通过 this 调用其他 action 或 getter，形成可复用的逻辑链。
立即学习“前端免费学习笔记（深入）”；
- 例如：一个
reset()action 可以先调用this.clearItems()，再调用this.initCount() - getter 支持 this 访问，比如
this.doubleCount或带参 getterthis.getItemById(5) - 注意避免循环调用，尤其是异步 action 间互相 await
在组件中调用 action 的正确方式
组件里不直接操作 state，而是调用 action 方法。使用 storeToRefs 可对 state 做响应式解构，但 action 必须保留原对象调用（不能解构出函数）。
- ✅ 正确：
counterStore.increment()或counterStore.fetchData() - ❌ 错误：
const { increment } = counterStore; increment()—— 会丢失 this 上下文，state 不更新 - 建议搭配
storeToRefs解构 state 和 getters，action 单独保留调用
