在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 相关文章推荐
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
微信小程序开发之路由切换页面重定向问题
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
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
Koa 使用小技巧(小结)
2018/10/22 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
python对url格式解析的方法
2015/05/13 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
优秀毕业生自荐信范文
2014/01/01 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
公司委托书怎么写
2014/08/02 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
社区敬老月活动总结
2015/05/07 职场文书
初中思品教学反思
2016/02/20 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
表扬信范文
2019/04/22 职场文书