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 EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
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
通过html表格发电子邮件
2006/10/09 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python 基础教程之Map使用方法
2017/01/17 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python/golang 删除链表中的元素
2020/09/14 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
最新会计专业求职信范文
2014/01/28 职场文书
银行类自荐信
2014/02/04 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
红色故事演讲稿
2014/05/22 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
2019年教师入党申请书
2019/06/27 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server