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的区别的更多相关文章

  1. vuex中的dispatch和commit

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

  2. 【转】大型Vuex项目 ,使用module后, 如何调用其他模块的 属性值和方法

    Vuex 允许我们把 store 分 module(模块).每一个模块包含各自的状态.mutation.action 和 getter. 那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, ...

  3. vuex直接修改state 与 用dispatch/commit来修改state的差异

    一. 使用vuex修改state时,有两种方式: 1.可以直接使用 this.$store.state.变量 = xxx; 2.this.$store.dispatch(actionType, pay ...

  4. vuex所有核心概念完整解析State Getters Mutations Actions

    vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...

  5. vuex知识笔记,及与localStorage和sessionStorage的区别

    菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...

  6. vuex应用实例-this.$store.commit()触发

    新建文件夹store,store下: action.js const actions = {} export default actions; getter.js const getters = {} ...

  7. vuex中的this.$store.commit

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...

  8. vuex action 与mutations 的区别

    面试没说清楚.这个太丢人回来整理下: 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步 ...

  9. iOS 中NSOperationQueue,Grand Central Dispatch , Thread的上下关系和区别

    In OS X v10.6 and later, operation queues use the libdispatch library (also known as Grand Central D ...

随机推荐

  1. 数据可视化之 tick_params( 参数 )

    参考:https://blog.csdn.net/helunqu2017/article/details/78736554/ 初学数据可视化,遇到了tick_params() 里面传参数问题,找了一些 ...

  2. python之路-----MySql操作二

    一.主键 1.每个 表只有一个主键 2.每个主键可以由多个列组成.(如果主键由多个组成,只要有一行列值不等即可) CREATE TABLE NAME ( id INT auto_increment, ...

  3. java第七次课堂笔记

  4. swiper使用中一些点的总结

    最近做了PC端改版,要求移动端有更好的体验,一些产品滚屏的展示,就用了swiper插件,以方便用户在移动端访问可以滑动翻屏展示. 本次项目中使用的是swiper2.0版本. 首先要引入swiper的j ...

  5. 关于Apache的配置方法和步骤

    一.下载.安装和卸载 网址:https://httpd.apache.org/docs/current/platform/windows.html#down 点击ApacheHaus,在里面下载任何版 ...

  6. js显示表单的提交验证

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. shell练习题3

    需求如下: 请按照这样的日期格式(xxxx-xx-xx)每天生成一个文件,例如今天生成的文件为2018-10-19.log, 并把磁盘的使用情况入到这个文件,(不需要写cron,写脚本即可) 参考解答 ...

  8. cocso引擎整体流程

    任何程序都有入口,mian.cpp; Cocos2d也不免俗,在win32平台下,有一个mian.cpp 入口,从这里进入cocos的世界. #ifndef __MAIN_H__ #define __ ...

  9. SpringIOC容器装配Bean

    Spring 的core Container(Spring的核心容器)有四大部分:bean.context.core.expression 在进行Bean的配置时候,需要添加四个jar包 如下: 分别 ...

  10. centos 7 安装

    一直很喜欢centos,5.6.7三个大版本都有用过. 这次重新在笔记本上安装centos 7. 先是下载了最新的unetbootin,用它来制作了U盘安装.unetbootin很好用,可以自动下载然 ...