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中

相关推荐
Camellia-lon2 分钟前
jQuery购物车实现:从入门到精通
前端·javascript·jquery
Mintopia5 分钟前
一套能落地的"模块拆分"方法:不靠经验也能做对
前端
禅思院7 分钟前
从术到道:构建企业级异步组件加载方案的设计哲学与实现精要
前端·vue.js·架构
哈罗哈皮7 分钟前
玩转OpenLayers主题色修改,打造独一无二的个性化地图
前端
糯米团子74910 分钟前
react速通-1
javascript·react.js
yuanpan14 分钟前
Python 开发一个简单演示网站:用 Flask 把脚本能力扩展成 Web 应用
前端·python·flask
IT_陈寒15 分钟前
Python的GIL把我CPU跑满时我才明白并发不是这样玩的
前端·人工智能·后端
小江的记录本17 分钟前
【分布式】分布式系统核心知识体系:CAP定理、BASE理论与核心挑战
java·前端·网络·分布式·后端·python·安全
freewlt25 分钟前
企业级前端性能监控体系:从Core Web Vitals到实时大盘实战
前端
研☆香26 分钟前
聊聊什么是AJAX
前端·ajax·okhttp