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. CPU、GPU、CUDA、cuDNN

    CPU擅长逻辑处理控制,GPU适合高强度的并行计算任务,为什么会存在这种差别?今天搜集了些相关资料,摘抄总结如下. 一.什么是GPU GPU这个概念是由Nvidia公司于1999年提出的.GPU是显卡 ...

  2. git 工作区管理

    git工作区 git的工作区就是电脑中能看到的目录,比如我的learning文件夹就是一个工作区 版本库暂存区 工作去有一个隐藏的目录.git,这个不算工作区,而是git的版本库 git的版本库中存了 ...

  3. java求0~100的质数(素数)

    质数的概念: 简单的来说就是一个数从2开始取模到(求余数)自身的值,如果取模后余数一直不等于0那么这个数就是质数(素数). 如 7     7%2    7%3    7%4    7%5   7%6 ...

  4. python dict to dataframe

    http://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.from_dict.html Examples By de ...

  5. MySQL 必知必会学习笔记(常用命令二)

    CREATE TABLE students(student_id INT UNSIGNED, name VARCHAR(30), sex CHAR(1), birth DATE, PRIMARY KE ...

  6. 《Swell数学》用户故事

    一.用户故事基础知识: 1. 从用户的角度来描述用户渴望得到的功能. 2. 用户故事是描述对用户有价值的功能,好的用户故事应该包括角色.功能和商业价值三个要素. 3. 一个用户故事只是以客户能够明白的 ...

  7. java web后台工作原理

    多时候我们都想知道,web容器或web服务器(比如Tomcat或者jboss)是怎样工作的?它们是怎样处理来自全世界的http请求的?它们在幕后做了什么动作?Java Servlet API(例如Se ...

  8. JS--------文件操作基本方法:上传/下载

    /** * 上传文件 * @param {any} files 文件 * @param {any} data 数据 * @returns [true,文件路径] * @returns [false,异 ...

  9. 使用datepicker和uploadify的冲突解决(IE双击才能打开附件上传对话框)

    在开发的过程当中,IE的兼容无疑是我们的一块绊脚石,在我们使用的如期的datepicker插件和使用上传附件的uploadify插件的时候,两者就产生冲突,只要点击过时间的插件,uploadify上传 ...

  10. 分布式session个人理解浅谈

    在分布式中,用户的session如何处理呢? 服务器中的原生session是无法满足需求的,因为用户的请求有可能随机落入到不同的服务器中,这样的结果将会导致用户的session丢失,传统做法中有解决方 ...