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 相关文章推荐
JS 统计时间
Mar 09 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
浅析javascript中的DOM
Mar 01 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
json数据处理及数据绑定
Jan 25 Javascript
js实现百度搜索提示框
Feb 05 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
vue单页开发父子组件传值思路详解
May 18 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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中的超全局变量
2006/10/09 PHP
初识php MVC
2014/09/10 PHP
php自定义apk安装包实例
2014/10/20 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python+selenium+autoit实现文件上传功能
2017/08/23 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python matplotlib可视化实例解析
2020/06/01 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
酒店营销策划方案
2014/02/07 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
班级旅游计划书
2014/05/03 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
项目经理岗位职责
2015/01/31 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
禁毒主题班会教案
2015/08/14 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书