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 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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获取程序执行的时间
2013/06/09 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
非常实用的php验证码类
2016/05/15 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue3.0 上手体验
2020/09/21 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
酒店总经理欢迎词
2014/01/08 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android