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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
处理canvas绘制图片模糊问题
May 11 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
wamp安装后自定义配置的方法
2014/08/23 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中动态创建类实例的方法
2017/03/24 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
利用python获取Ping结果示例代码
2017/07/06 Python
django静态文件加载的方法
2018/05/20 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
2015年教师节活动总结
2015/03/20 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
mysql自增长id用完了该怎么办
2022/02/12 MySQL