vuex中store存储store.commit和store.dispatch的用法


Posted in Javascript onJuly 24, 2020

代码示例:

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

两者都可以以载荷形式或者对象风格的方式进行提交

补充知识:如何获取vuex的action的返回值(axios请求为例)

因为之前老师有讲过将vuex的封装。

今天就想尝试写一下,然后就封装了。

但是我想要在vue组件里面获取vuex的action的返回值

这里我用的dispatch调用 如图

vuex中store存储store.commit和store.dispatch的用法

我这里使用的new Promise的方法

vuex中store存储store.commit和store.dispatch的用法

调用getlunbolist的时候返回一个new Promise,把需要的值用resolve带出

在组件就可以用then的方法取出来使用

vuex中store存储store.commit和store.dispatch的用法

我只是一个小小白,我知道我的表述很生硬而且可能还不准备,但是意思就是大概这个意思。而且会坚持把我觉得有收获的内容下来的,希望以后成大佬了能自己来完善,当然大佬们看到问题了可以多多指点一下小弟。

以上这篇vuex中store存储store.commit和store.dispatch的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
详解webpack babel的配置
Jan 09 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
js实现滑动滑块验证登录
Jul 24 #Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 #Javascript
对vuex中store和$store的区别说明
Jul 24 #Javascript
小程序实现简单语音聊天的示例代码
Jul 24 #Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 #Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 #Javascript
javascript实现支付宝滑块验证码效果
Jul 24 #Javascript
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python3人脸识别的两种方法
2019/04/25 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
智能钱包:Ekster
2019/11/21 全球购物
端午节活动总结报告
2015/02/11 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书