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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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中webservice实现的简单架构方法及实例
2015/02/03 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
浅谈react 同构之样式直出
2017/11/07 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
python实现绘制树枝简单示例
2014/07/24 Python
python对数组进行反转的方法
2015/05/20 Python
Python中的下划线详解
2015/06/24 Python
利用python画一颗心的方法示例
2017/01/31 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python实现简单的五子棋游戏
2020/09/01 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
计算机维护专业推荐信
2014/02/27 职场文书