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就可以搞定,语法如下 --将数据表中两个列数据互换的语法-- update tabName set field1=field2, ...

  2. Previous operation has not finished;run 'cleanup' if it was interrupted;Please execute the 'Cleanup' command.

    今天更新文件夹时svn报错如下 提示说让clean up,但是clean up又提示fail,让继续clean up,这样就陷入死循环了…… 搜了多种解决办法后找到原因:当时正在打开着svn的某个文件 ...

  3. CentOS 7系统上添加netcdf库

    这里提供两种方法来安装 netcdf: 一是 yum 安装,yum 安装时采用的是系统自带的 gfortran 编译器,版本较旧: 二是采用源码来 Makefile 编译安装的方式,它可以下载最新版的 ...

  4. Java小目标

    看了智联.内推和拉勾这三个招聘网站,除了智联外,其它招聘网站对岗位要求的描述都比较专业.大部分公司都要求会一些HTML5.JS,SSH等前端技术,所有公司都要求会使用Oracle.MySQL等数据库, ...

  5. 界面控件DevExpress发布v18.2.7,新版全新出发|附下载

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  6. Thread类线程结束会唤醒使用其对象做锁而睡眠的线程

    首先回顾一下我们的基础知识. sleep: 线程睡眠,不会释放锁 wait: 线程等待.释放锁. notity: 唤醒随机一个当前对象等待的线程,并不会释放锁 notityAll: 唤醒所有当前对象等 ...

  7. django之CSRF

    在POST请求到达views之前,csrf帮我们进行一层验证 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. 图数据库Neo4j

    官网下载:https://neo4j.com/download/ 图数据库Neo4j入门:https://blog.csdn.net/gobitan/article/details/68929118 ...

  9. python模块之os_sys_动态导入_包

    os模块: #!/usr/bin/env python # coding:utf-8 import os print(os.getcwd()) #获取当前工作目录,即当前python脚本工作的目录路径 ...

  10. 组合,Mixin,类、类对象、实例对象

    1.组合,将几个横向关系的组合在一起.所谓的组合就是将类的实例化放到新类里面,那么就将旧类组合进去了. class Turtle: def __init__(self, x): # 注意 init 前 ...