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 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
Vuex 入门教程
Jan 10 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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
php2html php生成静态页函数
2008/12/08 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
python杀死一个线程的方法
2015/09/06 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
详解python itertools功能
2020/02/07 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
投标承诺书怎么写
2014/05/24 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
公司地址变更通知
2015/04/25 职场文书
怎样写家长意见
2015/06/04 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python