在Vuex使用dispatch和commit来调用mutations的区别详解

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的区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用:这是一些简单的vue的小组件方法: http://www.jb51.net/article/138230.htm) 何为四大金刚? 1.State (这里可以是 小写的 state,跟官网保持一致,采用大写,因为个人习惯,后面的代码介绍采用小写) vuex的状态管理,需要依赖

  • Vuex之理解Mutations的用法实例

    1.什么是mutations? 上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据),Vue的视图是由数据驱动的,也就是说state里面的数据是动态变化的,那么怎么改变呢,切记在Vuex中store数据改变的唯一方法就是mutation! 通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离. 2.怎么用mutation

  • Vuex modules模式下mapState/mapMutations的操作实例

    当我们使用 Vuex 实现全局状态维护时,可能需要将状态值划分多个模块,比如一些 root 级的用户登录状态,token,用户级的用户信息,购物车级的购物车信息. 下面我们实例演示下如何在多模块下使用 mapState/mapMutations. modules 只作用于属性,属性会归属在相应的模块名的命名空间下. mutations, actions, getter 没有命名空间的限定,所以要保证全局的唯一性,否则后者会覆盖前者 store/index.js import Vue from '

  • vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

    在store.js里面添加如下的代码就可以了: // 热重载 if (module.hot) { // 指定要监控的文件 module.hot.accept(['./mutations'], () => { const mutations = require('./mutations').default // Vuex 提供的热重载接口 store.hotUpdate({ mutations }) }) } 以上这篇vue-cli整合vuex的时候,修改actions和mutations,实现热

  • 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • vuex实现像调用模板方法一样调用Mutations方法

    我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit('jia')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理? 我们可以想一想我们在解决state时是如何解决的,为此我们将介绍一个与解决state相同方案 第一步在我们自己创建模板a.vue里引入我们的mapMutations 代码如下: import {mapState,mapMutations} from 'v

  • Vuex中mutations与actions的区别详解

    区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化. 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步竞态怎么处理那是用户自己的事情. vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样).同步的意义在于这样每一个 mutation 执

  • 在Vue-cli里应用Vuex的state和mutations方法

    首先,必须安装vuex的依赖 npm install vuex --save-dev 创建专属vuex的文件夹和store.js: store.js里引入并应用插件vuex 定义常量state,用于存放变量&&定义常量mutations存放对变量的处理方法: 导出Vuex.store的实例,参数为刚才定义的state和mutations: 最后,还要在入口js文件引入到Vue的实例之中: 之后,我们就可以在组件当中,调用到我们在vuex存放的变量和方法: 首先:在父组件调用变量headTi

  • 在Vuex使用dispatch和commit来调用mutations的区别详解

    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

  • JVM 方法调用之静态分派(详解)

    JVM 方法调用之静态分派(详解)

    分派(Dispatch)可能是静态也可能是动态的,根据分派依据的宗量数可分为单分派和多分派.这两种分派方式的两两组合就构成了静态单分派,静态多分派,动态单分派,动态多分派这4种组合.本章讲静态分派. 1.静态分派 所有依赖静态类型来定位方法执行版本的分派动作称为静态分派.静态分派的典型应用是方法重载.静态分派发生在编译阶段,因此确定静态分派的动作实际上不是由虚拟机来执行的. 那么什么是静态类型(static type)呢? Super object = new Sub(); 像上面的语句,Sup

  • Kotlin 语言中调用 JavaScript 方法实例详解

    Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J

  • C语言中调用Swift函数实例详解

    C语言中调用Swift函数实例详解 在Apple官方的<Using Swift with Cocoa and Objectgive-C>一书中详细地介绍了如何在Objective-C中使用Swift的类以及如何在Swift中使用Objective-C中的类.在后半部分也介绍了如何在Swift中使用C函数,不过对于如何在C语言中使用Swift函数却只字未提.这里我就为大家分享一下如何在C语言中调用Swift函数. 我们首先要知道的是,所有Swift函数都属于闭包.其次,Swift函数的调用约定与

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • C#调用Java方法实例详解

    C#调用Java方法实例详解

    C#可以直接引用C++的DLL和转换JAVA写好的程序.最近由于工作原因接触这方面比较多,根据实际需求,我们通过一个具体例子把一个JAVA方法转换成可以由C#直接调用的DLL C#调用c++ C#调用C++的例子网上很多,以一个C++的具体方法为例. C++代码 // 获取一帧图像数据 MVSMARTCAMCTRL_API int __stdcall MV_SC_GetOneFrame(IN void* handle, IN OUT unsigned char *pData , IN unsig

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • C++调用C函数实例详解

    C++调用C函数实例详解 前言:以前见到extern "C"这样的语句,只是简单地知道跟外部链接有关,但是没有深刻理解它的意思. 首先,为什么要使用extern "C"修饰符? C++调用其它语言的函数,由于编译器生成函数的机制不一样,所以需要经过特殊处理,才可以调用.调用C语言的函数,需要在函数声明的地方语句extern "C".如果不使用该语句,在链接的时候,编译器就会报以下这种错误. Test.obj : error LNK2019: 无法

  • JVM 方法调用之动态分派(详解)

    JVM 方法调用之动态分派(详解)

    1. 动态分派 一个体现是重写(override).下面的代码,运行结果很明显. public class App { public static void main(String[] args) { Super object = new Sub(); object.f(); } } class Super { public void f() { System.out.println("super : f()"); } public void f(int i) { System.out

随机推荐