在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中使用arguments获得函数传参个数实例
Aug 27 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
extjs简介_动力节点Java学院整理
Jul 17 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
jquery插件实现搜索历史
Apr 24 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
yii框架配置默认controller和action示例
2014/04/30 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
Python装饰器原理与用法分析
2018/04/30 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python3安装speech语音模块的方法
2018/12/24 Python
python如何制作缩略图
2019/04/30 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
深入了解python列表(LIST)
2020/06/08 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
servlet面试题
2012/08/20 面试题
文职个人求职信范文
2013/09/23 职场文书
七一表彰活动方案
2014/01/18 职场文书
担保书格式及范文
2014/04/01 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技