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验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
Node.js的特点详解
Feb 03 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
js href的用法
2010/05/13 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Python 内存管理机制全面分析
2021/01/16 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
机工车间主任岗位职责
2014/03/05 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
党员自评材料范文
2014/12/17 职场文书
房地产项目合作意向书
2015/05/08 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
子女赡养老人协议书
2016/03/23 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python