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. Winsock API编程介绍

    相信很多人都对网络编程感兴趣,下面我们就来介绍,在网络编程中应用最广泛的编程接口Winsock API. 使用Winsock API的编程,应该了解一些TCP/IP的基础知识.虽然你可以直接使用Win ...

  2. Mac中java实现自动打开软件问题

    Runtime.getRuntime().exec("/Applications/NetEaseMusic.app/Contents/MacOS/NetEaseMusic");遗留 ...

  3. [树组BIT]训练两题重新理解ver.

    树状数组重(jiao)新(wo)理(zuo)解(ren) POJ-2352 加加加都给我加 输入是一行一行按照x从小到大给出的,所以对于每个点,要考虑的只是x比它小的点的个数.即记录各个x的情况,并且 ...

  4. https://www.cnblogs.com/h2zZhou/p/5440271.html

    https://www.cnblogs.com/h2zZhou/p/5440271.html

  5. 使用docker安装sentry

    一.安装docker yum -y install docker 更换docker镜像源为中科大的 在配置文件/etc/docker/daemon.json中加入 { "registry-m ...

  6. CentOS-7-1804下MySQL安装及防火墙设置

    第一步,下载MySQL Linux 版本安装包,这里使用 这个版本. 第二步,上传安装包到Linux系统中. 第三步,解压安装包 tar -zxvf mysql--linux-glibc2.-x86_ ...

  7. 微信小程序-解决下拉刷新报错

    关于“enablePullDownRefresh”: “true” 一.使用方式 在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件.需要在 config ...

  8. Docker run 命令

    docker run -d -p 8084:80 --name weather --restart always --link fme-postgis 192.168.1.220:5000/weath ...

  9. Python 3 基本操作列举

    1.字符串 2,列表 3.random库 计算机产生的随机数都是有一个种子开始的伪随机序列,相同的随机种子产生相同的伪随机数序列. >>> random.seed(10) >& ...

  10. 将字符串类型的出生日期转为int类型的年龄

    public static int getAgeByBirthday(String s) { Date birthday = null; SimpleDateFormat format = new S ...