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

最新推荐文章于 2025-04-03 08:00:00 发布

原创最新推荐文章于 2025-04-03 08:00:00 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了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
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Java_Scholar0

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue】登录与角色权限动态菜单

m0_62956576的博客

05-31

1918

根据用户不同的角色权限，生成对应的路由菜单。

Vue经典面试题（附源码级详解）

前端金牌摸鱼达人

07-03

1815

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

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

11-20

1、在Vue项目中引用公共方法作为一个新人小白，在使用vue的过程中，难免会遇到很多的问题，比如某个方法在很多组件中都能用的上，如果在每个组件上都去引用一次的话，会比较麻烦，增加代码量。怎么做比较好呢，话不多说直接看代码把首先要在main.js中引入公共js。然后，将方法赋在Vue的原型链上。像图中这样。然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export default{ login:function(){ console.log('这是一段代码') } }

weixin_30908103的博客

02-23

2205

Vue的项目中，如果项目简单，父子组件之间的数据传递可以使用 props 或者 $emit 等方式进行传递但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。看了下vuex的官网，觉得...

Vue中this.$store.dispatch方法

qq_45647792的博客

06-08

1493

这里便是向’Login’方法，传递this.loginForm（即此Window的表单值）。，用于向后台提交数据，是异步操作。

用store 实现vue 的dicts 字典属性功能

06-06

```javascript//store/index.jsimportVuefrom'vue'importVuexfrom'vuex'importdictfrom'./modules/dict'Vue.use(Vuex)conststore=newVuex.Store({modules:{dict}})exportdefaultstore```###二、在组件中使用字典在...

商城项目 pc----商品详情页

每天都要努力学习哦~~

06-23

1254

详情页

阿里前端高频vue面试题（边面边更）

bb_xiaxia1998的博客

10-14

5336

指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

跨框架探索：React Redux 和 Vuex 对比分析快速掌握React Redux

笔记、经验、日常分享

04-09

2166

React Redux 和 Vuex 都是前端状态管理库，分别用于 React 和 Vue.js 框架。它们都提供了一套规范的状态管理机制，帮助开发者更好地组织和管理应用状态。从Vue开发者视角下的React Redux快速上手指南。

vuex中this.$store.commit和this.$store.dispatch的用法

weixin_48123820的博客

05-23

1926

👉相同：都是传值给vuex的mutation改变state。

vuex中this.$store.dispatch和this.$store.commit的区别（都是调用vuex中的方法。一个异步一个同步）

初心不改，事在人为

04-10

4204

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()二者的区别

天涯芳草

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

4573

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

3364

vuex中如何模块化使用this.$store.dispatch（）方法

vuex--this.$store.dispatch

最新发布

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); }); ```