vuex中store.commit和store.dispatch的区别及使用方法
更新时间：2023年01月10日 10:12:49 作者：longzhoufeng
这篇文章主要介绍了vuex中store.commit和store.dispatch的区别及使用方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
store.commit和store.dispatch的区别及使用
代码示例：
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.dispatch('isLogin', true);commit：同步操作，数据提交至 mutations ，可用于读取用户信息写到缓存里
this.$store.commit('loginStatus', 1);this.$store.dispatch() 与 this.$store.commit()
传值给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()的区别及说明
- vuex中this.$store.commit和this.$store.dispatch的基本用法实例
- vuex中store存储store.commit和store.dispatch的区别及说明
- Vuex中this.$store.commit()和this.$store.dispatch()区别说明
- vuex中store存储store.commit和store.dispatch的用法
- 在Vuex使用dispatch和commit来调用mutations的区别详解
- Vue中commit和dispatch区别及用法辨析(最新)
相关文章
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
这篇文章主要介绍了基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 ),非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了vue+echarts绘制省份地图并添加自定义标注方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue项目动态设置页面title及是否缓存页面的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题
这篇文章主要介绍了Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
router-view组件作为vue最核心的路由管理组件，在项目中作为路由管理经常被使用到，所以下面小编就来和大家详细聊聊router-view组件的具体使用方法，希望对大家有所帮助2023-06-06
这篇文章主要介绍了讲解vue-router之什么是动态路由，详细的介绍了什么是动态路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
vue、react等单页面项目部署到服务器的方法及vue和react的区别
这篇文章主要介绍了vue、react等单页面项目部署到服务器的方法,需要的朋友可以参考下2018-09-09
vue如何修改el-form-item中的label样式修改问题
这篇文章主要介绍了vue如何修改el-form-item中的label样式修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论