Vue Pinia 状态管理怎么使用 actions 编写同步与异步的业务逻辑

雨枫君_5383

雨枫君_5383

2026-08-17

895人浏览

原创

pinia 的 actions 是业务逻辑核心,统一处理同步修改和异步操作;同步时直接通过 this 修改响应式 state,异步时用 async/await 管理副作用并实时更新状态,支持内部调用其他 action 或 getter,组件中须保持 this 上下文调用。

vue pinia 状态管理怎么使用 actions 编写同步与异步的业务逻辑

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-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习