mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中。和 mapActions 的功能几乎一样,我们来直接看它的实现:

export function mapMutations (mutations) {
const res = {}
normalizeMap(mutations).forEach(({ key, val }) => {
res[key] = function mappedMutation (...args) {
return this.$store.commit.apply(this.$store, [val].concat(args))
}
})
return res
}

  函数的实现几乎也和 mapActions 一样,唯一差别就是映射的是 store 的 commit 方法。为了更直观地理解,我们来看一个简单的例子:

import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment' // 映射 this.increment() 到 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
})
}
}

  经过 mapMutations 函数调用后的结果,如下所示:

import { mapActions } from 'vuex'
export default {
// ...
methods: {
increment(...args) {
return this.$store.commit.apply(this.$store, ['increment'].concat(args))
}
add(...args) {
return this.$store.commit.apply(this.$store, ['increment'].concat(args))
}
}
}

.

vuex 中关于 mapMutations 的作用的更多相关文章

  1. vuex 中关于 mapState 的作用

    辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...

  2. vuex 中关于 mapActions 的作用

    mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中.和 mapState.mapGetters 也类似,只不过它映射的地方不是计算属性,而是组 ...

  3. vuex 中关于 mapGetters 的作用

    mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中.它的功能和 mapState 非常类似,我们来直接看它的实现: export function mapGett ...

  4. vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations

    1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...

  5. vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用

    vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...

  6. vuex中module的命名空间概念

    vuex中module的命名空间概念 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的. 弊端1:不同模块中有相同命名的mutations.action ...

  7. Vuex中mapState的用法

    Vuex中mapState的用法   今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue ...

  8. Electron-vue实战(三)— 如何在Vuex中管理Mock数据

    Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...

  9. SQLSERVER中NULL位图的作用

    SQLSERVER中NULL位图的作用 首先感谢宋沄剑提供的文章和sqlskill网站:www.sqlskills.com,看下面文章之前请先看一下下面两篇文章 SQL Server误区30日谈-Da ...

随机推荐

  1. Vue2.0 - 构造器的延伸 Vue.extend

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

  2. Zabbix整合MegaCLI实现物理硬盘的自动发现和监控

    MegaCLI是LSI提供的用户空间管理RAID卡(LSI芯片)工具,适用于大多数的Dell服务器. MegaCLI介绍: http://zh.community.dell.com/techcente ...

  3. BZOJ 1452:[JSOI2009]Count(二维树状数组)

    [JSOI2009]Count 描述 输入 输出 1 2 分析: 裸二维bit,对每个颜色建一颗bit. program count; var bit:..,..,..]of longint; a:. ...

  4. mysql错误之2014

    error:2014 Commands out of sync; you can't run this command now 这个错误号我也真是醉了. 一直纠结于为什么存储过程执行完,commit操 ...

  5. [LOJ#2330]「清华集训 2017」榕树之心

    [LOJ#2330]「清华集训 2017」榕树之心 试题描述 深秋.冷风吹散了最后一丝夏日的暑气,也吹落了榕树脚下灌木丛的叶子.相识数年的Evan和Lyra再次回到了小时候见面的茂盛榕树之下.小溪依旧 ...

  6. [bzoj4259][bzoj4503] 残缺的字符串 [FFT]

    题面 传送门 bzoj上的这两题是一样的...... 正文 我看到这道题,第一想法是跑魔改过的KMP,然后很快发现不可行 于是想换个角度思考 其实,本题最大的问题就在于通配符的存在:它可以匹配任意一个 ...

  7. hdu5834 Magic boy Bi Luo with his excited tree 【树形dp】

    题目链接 hdu5834 题解 思路很粗犷,实现很难受 设\(f[i][0|1]\)表示向子树走回来或不回来的最大收益 设\(g[i][0|1]\)表示向父亲走走回来或不回来的最大收益 再设\(h[i ...

  8. linux系统初始化——inittab文件解析

    inittab文件解析 inittab配置文件每行的基本格式如下. id:runlevels:action:process 其中某些部分可以为空,下面我们逐一介绍. 1.id 1-2个字符,配置行的唯 ...

  9. 编程风格——代码中特殊的注释技术——TODO、FIXME和XXX的用处

    代码中特殊的注释技术——TODO.FIXME和XXX的用处 前言:今天在阅读Qt Creator的源代码时,发现一些注释中有FIXME英文单词,用英文词典居然查不到其意义!实际上,在阅读一些开源代码时 ...

  10. bzoj 2387: [Ceoi2011]Traffic

    bzoj 2387: [Ceoi2011]Traffic 题目描述 The center of Gdynia is located on an island in the middle of the ...