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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php进程间通讯实例分析
2016/07/11 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
寄语十八大感言
2014/02/07 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
pandas中pd.groupby()的用法详解
2022/06/16 Python
app场景下uniapp的扫码记录
2022/07/23 Java/Android