在Vuex使用dispatch和commit来调用mutations的区别详解


Posted in Javascript onSeptember 18, 2018

main.js中

import Vuex from 'vuex'
Vue.use(vuex);
const store = new Vuex.store({
state: {


nickName: "",


cartCount: 0


},

mutations: {


updateUserInfo(state,nickName) {



state.nickName = nickName;


},


updateCartCount(state,cartCount) {



state.cartCount += cartCount;


}

},
 actions: {
 updateUserInfo(context) {
  context.commit("updateUserInfo");
 },
 updateCartCount(context) {
  context.commit("updateCartCount");
 }
 }
})
new Vue({

el: "#app",

store,

router,

template: '<App/>',

components: {App}
})

组件中:

methods: {
  increment(){
  this.$store.dispatch("updateUserInfo", 'nick'); //this.$store.commit("increment", 'nick');
  },
  decrement() {
  this.$store.dispatch("updateCartCount", 1); // this.$store.commit("decrement", 1);
  }
 }

区别:

dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)

commit:同步操作,写法:this.$store.commit('mutations方法名',值)

以上这篇在Vuex使用dispatch和commit来调用mutations的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
ext jquery 简单比较
Apr 07 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
微信小程序开发之路由切换页面重定向问题
Sep 18 #Javascript
在小程序中使用canvas的方法示例
Sep 17 #Javascript
webpack4打包vue前端多页面项目
Sep 17 #Javascript
node中的密码安全(加密)
Sep 17 #Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 #Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 #Javascript
vue的过滤器filter实例详解
Sep 17 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP SOCKET编程详解
2015/05/22 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
网页自动跳转代码收集
2009/09/27 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
django静态文件加载的方法
2018/05/20 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
一百多行python代码实现抢票助手
2018/09/25 Python
pytorch中index_select()的用法详解
2021/01/06 Python
护士自荐信
2013/10/25 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
服务质量承诺书
2014/03/27 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
公司禁烟通知
2015/04/23 职场文书
实践论读书笔记
2015/06/29 职场文书
开业庆典致辞
2015/08/01 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书