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. sql习题及答案

    sql习题:http://www.cnblogs.com/wupeiqi/articles/5729934.html 习题答案参考:https://www.cnblogs.com/wupeiqi/ar ...

  2. lr添加md5方法,字符编码转换,urlcode编码化

    1.使得写lr脚本时可调用md5方法,需要进行以下操作: 1)将md5.h文件加载到Extra Files下: 2)在globals.h文件中添加  #include“md5.h” 3).打开md5文 ...

  3. sqlparameters

    1.数据访问层 using的用法: 01.可以using System;导命名控空间 02.using 的语法结构 using(变量类型  变量名 =new 变量类型()) { } 案例: 03.us ...

  4. html页面禁止用户右键粘贴复制保存的代码

    HTML页面禁止选择.页面禁止复制.页面禁止右键 原创古城寨主2018-03-01 17:50:59评论(1)228人阅读   HTML页面内容禁止选择.复制.右键 刚在一个看一个站点的源代码的的时候 ...

  5. 学习python D1

    shell脚本最擅长移动文件和替换文本,并不适合GUI界面或者游戏开发,Python是一种解释型语言,在程序开发阶段可以为你节省大量时间 Python2的用户输入需要用raw_input()而非inp ...

  6. ubuntu上安装并使用mysql数据库

    一.安装Mysql 最简单的方式就是apt-get安装 安装核心程序 sudo apt-get install mysql-client-core-5.6 安装客户端程序 sudo apt-get i ...

  7. POJ - 2777——Count Color(懒标记线段树二进制)

    Count Color Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 53639   Accepted: 16153 Des ...

  8. fastreport窗口重置(适用于属性、数据等窗口显示不出来)

    找到如下路径: C:/Users/账户名/AppData/Local/FastReport/FastReport.config 删除即可. 记得先退出使用FastReport的程序,再删除

  9. springmvc初始化失败问题跟踪

    1.问题 访问路径http://10.118.30.52:8088/helloWorld/hello后会报404错误,原因是springmvc配置文件中的包扫描路径错误.修改配置如下: <con ...

  10. android spf中存list<string>

    private void setSpfList() { final SharedPreferences mSharedPreferences = getPreferences(Context.MODE ...