在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 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
JS常见构造模式实例对比分析
Aug 27 Javascript
浅谈js闭包理解
Mar 28 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
用js实现放大镜效果
Oct 28 Javascript
使用jQuery实现购物车
Oct 29 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
用PHP4访问Oracle815
2006/10/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
thinkphp分页实现效果
2016/10/13 PHP
php解决安全问题的方法实例
2019/09/19 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
Document 对象的常用方法
2009/07/31 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python中随机函数random用法实例
2015/04/30 Python
解读Python中degrees()方法的使用
2015/05/18 Python
详解Django框架中的视图级缓存
2015/07/23 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python实现excel读写数据
2021/03/02 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
工程质量月活动方案
2014/02/19 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
校园标语大全
2014/06/19 职场文书
供电工程专业求职信
2014/08/09 职场文书
爱护公物主题班会
2015/08/17 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang