Vue中commit和dispatch区别及其用法辨析

在Vue中,commitdispatch是两个用于触发 Vuex store 中的 mutations 和 actions 的方法。

区别

  1. commit: 用于触发 mutations,即直接修改 state 的同步操作。通过commit方法可以调用 store 中的 mutations,并且只能同步地执行。使用方式如下:

    javascript 复制代码
    this.$store.commit('mutationName', payload);
  2. dispatch: 用于触发 actions,即执行异步操作或者复杂的逻辑处理。通过dispatch方法可以调用 store 中的 actions,并且可以是异步的。使用方式如下:

    javascript 复制代码
    this.$store.dispatch('actionName', payload);

辨析:

  • 当需要修改 state 时,应该使用**commit来调用 mutations**。
  • 当需要进行异步操作、例如发送网络请求、多个 mutations 之间有依赖关系等情况,应该使用**dispatch来调用 actions**。

总结

commit用于同步操作,主要用来修改 state;dispatch用于异步操作,主要用来执行一系列的操作,包括触发多个 mutations 或者其他一些异步操作。

异步操作:从云端拉取信息后才会执行,放在actions中

同步操作:放在mutations中

相关推荐
willingtolove3 分钟前
使用chrome修改请求参数重新发送请求
前端·chrome
-曾牛12 分钟前
CSRF跨站请求伪造:原理、利用与防御全解析
前端·网络·web安全·网络安全·渗透测试·csrf·原理解析
大佐不会说日语~22 分钟前
SSE 流式输出 Markdown 实时渲染问题解决方案
java·vue.js·sse·spring ai·前端实时渲染
卓码软件测评26 分钟前
第三方软件检测机构:【利用测试工具Postman测试沙箱:在Tests标签中编写健壮的质量检查逻辑测试脚本】
javascript·node.js·postman
魂祈梦37 分钟前
前端下载多个文件/浏览器批量下载文件
前端·浏览器
谎言西西里44 分钟前
彻底搞懂 JavaScript 的 this:从陷阱到解决方案
javascript
小明记账簿_微信小程序44 分钟前
手写一个webpack插件(plugin)
前端
我命由我123451 小时前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
BD_Marathon1 小时前
【JavaWeb】CSS浮动
前端·css
1024肥宅1 小时前
手写 Promise:深入理解 JavaScript 异步编程的核心
前端·javascript·promise