Vue学习-this.$store.dispatch()/commit()异同

最新推荐文章于 2025-04-03 08:00:00 发布
原创 最新推荐文章于 2025-04-03 08:00:00 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文详细介绍了Vue框架中状态管理工具Vuex的使用方法，包括如何通过commit和dispatch进行值的存取操作。同时对比了两者之间的区别，如commit为同步操作，而dispatch则适用于异步操作。

Vue

一、相同

都可以用于存取值

 this.$store.commit('key',val)【存值】
 this.$store.state.key【取值】

例:
存:

 findAllMenuTree().then((res)=>{
   if(res.code == 200){
       this.$store.commit("setMenu", {
              menuData: res.result
       });
 }})

取:

this.$store.state.menuData;

在这里插入图片描述

this.$store.dispatch('key',val)【存值】
this.$store.getters.key【取值】

二、不同

commit:同步操作，写法：this.$store.commit(‘mutations方法名’,值)

dispatch:异步操作，写法：this.$store.dispatch(‘actions方法名’,值)
在store中定义了mutations和actions
在这里插入图片描述

商城项目 pc----商品详情页
每天都要努力学习哦~~
06-23 1244
详情页
Vue经典面试题（附源码级详解）
前端金牌摸鱼达人
07-03 1801
Vue经典面试题（附源码级详解）
vuex中store存储store.commit和store.dispatch的用法
01-19
代码示例： this.$store.commit(‘loginStatus’, 1); this.$store.dispatch(‘isLogin’, true); 规范的使用方式： // 以载荷形式 store.commit('increment'，{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 //这是额外的参数 }) 主要区别： dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据 写法示例： this.$store
解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function...
weixin_30908103的博客
02-23 2203
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得...
Vue中this.$store.dispatch方法
qq_45647792的博客
06-08 1457
这里便是向’Login’方法，传递this.loginForm（即此Window的表单值）。，用于向后台提交数据，是异步操作。
vuex中this.$store.commit和this.$store.dispatch的用法
weixin_48123820的博客
05-23 1918
👉相同：都是传值给vuex的mutation改变state。
vuex中this.$store.dispatch和this.$store.commit的区别（都是调用vuex中的方法。一个异步一个同步）
初心不改，事在人为
04-10 4198
this.store.dispatch：含有异步操作，例如向后台提交数据，写法：this.store.dispatch：含有异步操作，例如向后台提交数据，写法： this.store.dispatch：含有异步操作，例如向后台提交数据，写法：this.store.dispatch(‘action方法名’,值) this.store.commit：同步操作，写法：this.store.commit：...
用store 实现vue 的dicts 字典属性功能
06-06
```javascript//store/index.jsimportVuefrom'vue'importVuexfrom'vuex'importdictfrom'./modules/dict'Vue.use(Vuex)conststore=newVuex.Store({modules:{dict}})exportdefaultstore```###二、在组件中使用字典在...
阿里前端高频vue面试题（边面边更）
bb_xiaxia1998的博客
10-14 5333
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
跨框架探索：React Redux 和 Vuex 对比分析快速掌握React Redux
笔记、经验、日常分享
04-09 2146
React Redux 和 Vuex 都是前端状态管理库，分别用于 React 和 Vue.js 框架。它们都提供了一套规范的状态管理机制，帮助开发者更好地组织和管理应用状态。从Vue开发者视角下的React Redux快速上手指南。
vuex中 this.$store.dispatch() 与 this.$store.commit()二者的区别
天涯芳草
04-26 2万+
this.$store.dispatch()与this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值) this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值) ......
详细分析 this.$store.dispatch 基本知识（附Demo）
码农研究僧的博客
04-03 4377
this.$store.dispatch 适用于全局状态管理和异步操作，但代码较冗长。 直接调用 API 适合不依赖 Vuex的情况，代码更简单。 mapActions 适用于仍然使用 Vuex，但希望代码更简洁的情况。 mapMutations 适用于仅需要同步更新 Vuex 状态的情况
vuex中的this.$store.commit和dispatch()使用
coinisi_li的博客
09-09 1万+
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况，我们可以用熟悉的props 或者 $emit 等方式进行父子组件通信，但是，在项目稍微大一点的情况中，面对众多的不相关的平行组件，并且很多数据需要多个组件循环使用，这个时候在这些组件间传递数据，使用上述方法会比较麻烦，项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 为了解决这一问题，我们需要使用Vue 的状态管理工具Vuex
vue中在vuex里面的this.$store.dispatch方法
weixin_49826079的博客
02-24 3354
vuex中如何模块化使用this.$store.dispatch（）方法
vuex--this.$store.dispatch
想去旅行的静静的博客
03-30 5万+
这是vue-element-admin的simple例子。 下面是登录vue的代码。 问题： 1、登录之后做了什么？ 2、this.store.dispatch是什么意思？3、this.store.dispatch是什么意思？ 3、this.store.dispatch是什么意思？3、this.router.push又是什么意思？ ...
this.$store.dispatch() 与 this.$store.commit()
weixin_43755104的博客
08-04 244
传值给vuex的mutation改变state commit: 同步操作 存储 this.$store.commit('changeValue',name) 取值 this.$store.state.changeValue dispatch: 异步操作 存储 this.$store.dispatch('getlists',name) 取值 this.$store.getters.getlists
vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别
OneBaBa的专栏
06-05 3378
在组件中使用actions，在组件中使用actions和在组建中使用mutations类似区别就是，mutations使用this.$store.commit('mutation方法名')提交mutation；dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)commit：同步操作，写法：this.$store.commit('mutations方法名',值)
深入理解 Vuex 中的this.$store.dispatch方法
热门推荐
你若盛开，清风自来
04-24 10万+
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6🍨🕠 牛客高级专题作者、在牛客打造高质量专栏🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程。
this.$store.dispatch('updateLiveAppList', this.$router)
最新发布
09-03
`this.$store.dispatch('updateLiveAppList', this.$router)` 是 Vuex 中用于触发异步操作的方法调用。 ### 使用场景与含义 在 Vuex 里，`this.$store.dispatch` 一般用来触发一个 action。在代码 `this.$store....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值