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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
javascript indexOf函数使用说明
Jul 03 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
Highcharts学习之数据列
Aug 03 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP 的几个配置文件函数
2006/12/21 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
js实现的xml对象转json功能示例
2016/12/24 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python中强大的format函数实例详解
2018/12/05 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
财务部出纳岗位职责
2013/12/22 职场文书
《乡愁》教学反思
2014/02/18 职场文书
婚礼主持结束词
2014/03/13 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
病假证明模板
2015/06/19 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
教你使用TensorFlow2识别验证码
2021/06/11 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js