深刻认识this.$store.dispatch() 与 this.$store.commit()的区别

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

关于这个问题，我写博客之前已经在网上查过很多博客。但是，回答很多都很笼统，不怎么清楚。
下面来看一下我的理解。
commit: 同步操作
存储

this.$store.commit('changeValue',name)

取值

this.$store.state.changeValue

dispatch: 异步操作
存储

this.$store.dispatch('getlists',name)

取值

this.$store.getters.getlists

总的来说，他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state

uniapp全局变量的实现
Front小思的博客
07-09 2万+
这里说全局变量，着重指的是能够全局动态响应的情况。说到全局变量，我们首先想到的可能就是vuex，确实，这是最好的实现方式。在uni-app中，我们还可以有其他的实现方式，当然，我们推荐的，还是使用uView封装后的vuex的实现方式，它具有配置简单，使用方便的特点。 整体来说，在uni-app中，可以有如下实现全局变量的方式： 本地存储 配置文件 挂载Vue.prototype globalData Vuex #本地存储 这是一种持久存储的方式，类似于web中的Local Storage，.
uniapp项目vuex的实战使用
小王的技术库
01-14 275
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
使用uni-app写h5页面总结
qq_27911459的博客
03-26 6544
1.设置全局变量 这里我只用了2种，一种在main.js里面设置了全局变量，一种使用vuex (1).第一种，main.js里面设置 Vue.prototype.Url = 'https://xx.xx.cn/lua_bills/'; 页面使用的时候可以这样用：this.Url+'openid', uni.request({ url :this.Url+'openid',...
uni-app-使用状态管理Vuex
m0_48259951的博客
03-29 746
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。，不需要去安装，直接导入使用。目录，在此目录下新建。
深入理解 Vuex 中的this.$store.dispatch方法
你若盛开，清风自来
04-24 10万+
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6🍨🕠 牛客高级专题作者、在牛客打造高质量专栏🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程。
store.dispatch和this.$store.dispatch的区别？
xiaoxiaoovo的博客
09-13 1792
综上所述，store.dispatch和this.$store.dispatch实际上是指向同一个Vuex的dispatch方法，只是在调用时的语法稍有不同，前者在Vue实例外使用，后者在Vue组件内部使用。store.dispatch和this.$store.dispatch实际上是指向同一个Vuex的dispatch方法，只是在调用时的方式略有不同。this.$store.dispatch是在Vue组件中使用的方式，用于在组件内部触发Vuex的action。
vuex中this.$store.dispatch和this.$store.commit的区别（都是调用vuex中的方法。一个异步一个同步）
初心不改，事在人为
04-10 4201
this.store.dispatch：含有异步操作，例如向后台提交数据，写法：this.store.dispatch：含有异步操作，例如向后台提交数据，写法： this.store.dispatch：含有异步操作，例如向后台提交数据，写法：this.store.dispatch(‘action方法名’,值) this.store.commit：同步操作，写法：this.store.commit：...
vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别
qq_37916164的博客
10-08 1821
1：Vuex是什么？ 所谓的Vuex其实是一个为Vue.js设计的数据仓库，把各个组件公用的数据放到一个仓库里面进行统一的管理 Vuex优点： 既使非父子组件间的数据共享也能变得简单明了 让程序变得更加可维护（将数据抽离了出来） 只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新 Vuex怎么用？ 先用vue-cli安装项目框架 @vue/cli用法 Yarn yarn global add @vue/cli npm npm install -g @vue/c
精选资源
vuex中store存储store.commit和store.dispatch的用法
01-19
this.$store.commit(‘loginStatus’, 1); this.$store.dispatch(‘isLogin’, true); 规范的使用方式： // 以载荷形式 store.commit('increment'，{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交...
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
10-15
this.$store.dispatch('modifyTips', this.value) ``` 通过上面的介绍，我们可以了解到在Vue项目中如何引用和使用公共方法以及如何通过Vuex进行高效的状态管理。无论是公共方法的引用还是Vuex的应用，都能够帮助...
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
10-15
// 这里你可以使用store.state, store.commit, store.dispatch等 }) ``` 这样，我们就可以直接在路由守卫中访问Vuex store，而无需依赖`this`。 3. **使用箭头函数**： 另一种解决方法是使用箭头函数来定义...
vue项目分析--this.$store.dispatch()&this.$store.commit()&vuex.store()
weixin_46045444的博客
10-12 7899
vue项目分析--20211012vuex中 this.\$store.dispatch() 与 this.$store.commit()方法的区别vuex vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别 这两个的区别是存取的方式不同，两个都是传值给vuex的mutation改变state this.$store.dispatch()含有异步操作，可以向后台提交数据 this.$store.dispatch("action的方法名",valu
vuex中 this.$store.dispatch() 与 this.$store.commit()
老电影故事的博客
01-30 1719
this.＄store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.＄store.dispatch(‘action方法名’,值)dispatch 调用的数 vuex 中 action 里的方法，action 中可以调用 mutation 中的函数，也可执行异步操作；this.＄store.commit()：同步操作，，写法：this.＄store.commit(‘mutations方法名’,值)commit 调用的是 vuex 中 mutation 里的方法，存在同步限制；
详细分析 this.$store.dispatch 基本知识（附Demo）
码农研究僧的博客
04-03 4521
this.$store.dispatch 适用于全局状态管理和异步操作，但代码较冗长。 直接调用 API 适合不依赖 Vuex的情况，代码更简单。 mapActions 适用于仍然使用 Vuex，但希望代码更简洁的情况。 mapMutations 适用于仅需要同步更新 Vuex 状态的情况
vue中在vuex里面的this.$store.dispatch方法
weixin_49826079的博客
02-24 3362
vuex中如何模块化使用this.$store.dispatch（）方法
vuex里面的this.$store.dispatch方法
热门推荐
lemonC77的博客
07-09 19万+
在store/modules文件夹里的user.js,声明user并释放出来。 const user = { state: { token: '', roles: null, isMasterAccount:true, }, mutations: { SET_TOKEN: (state, token) => { state.token...
this.$store.dispatch(“LoginByUsername“, this.loginForm)的用法解释
超级浣熊
01-13 9235
vue.js登录代码解释
vuex中this.$store.commit和this.$store.dispatch的用法
老电影故事的博客
12-10 4万+
前言 this.store.dispatch()与this.store.dispatch() 与 this.store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state 区别 this.$store.commit() 同步操作 this.$store.commit('方法名',值)【存储】 this.$store.state.方法名【取值】 this.$store.dispatch()
this.$store.dispatch('updateLiveAppList', this.$router)
最新发布
09-03
`this.$store.dispatch('updateLiveAppList', this.$router)` 是 Vuex 中用于触发异步操作的方法调用。 ### 使用场景与含义 在 Vuex 里，`this.$store.dispatch` 一般用来触发一个 action。在代码 `this.$store.dispatch('updateLiveAppList', this.$router)` 中，`'updateLiveAppList'` 是要触发的 action 的名称，`this.$router` 则是传递给该 action 的参数。通常，action 可包含异步操作，像发送网络请求、处理定时器等，还可以在 action 里提交 mutation 来更改 store 中的 state。 ### 示例代码 #### 定义 action ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { liveAppList: [] }, mutations: { UPDATE_LIVE_APP_LIST(state, newList) { state.liveAppList = newList; } }, actions: { updateLiveAppList({ commit }, router) { // 这里可以进行异步操作，例如根据路由信息获取数据 // 假设通过路由信息获取新的直播应用列表 const newList = getLiveAppListBasedOnRoute(router); commit('UPDATE_LIVE_APP_LIST', newList); } } }); function getLiveAppListBasedOnRoute(router) { // 模拟根据路由信息获取数据 return ['app1', 'app2', 'app3']; } ``` #### 在组件中使用 ```vue <template> <div> <!-- 组件内容 --> </div> </template> <script> export default { methods: { updateList() { this.$store.dispatch('updateLiveAppList', this.$router); } }, mounted() { this.updateList(); } }; </script> ``` ### 常见报错及解决办法 - **action 未定义**：若出现 `[vuex] unknown action type: updateLiveAppList` 错误，表明在 store 里未定义 `updateLiveAppList` 这个 action。需要检查 store 中的 `actions` 对象，保证 `updateLiveAppList` 已正确定义。 - **异步操作未处理**：当 action 里的异步操作（如网络请求）失败时，可能会引发错误。可以在 action 里使用 `try...catch` 来捕获错误并处理，或者在组件中使用 `.catch()` 方法处理错误。 ```javascript this.$store.dispatch('updateLiveAppList', this.$router) .catch(error => { console.error('更新直播应用列表失败:', error); }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值