vuex 中关于 mapMutations 的作用
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 的作用的更多相关文章
- vuex 中关于 mapState 的作用
辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...
- vuex 中关于 mapActions 的作用
mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中.和 mapState.mapGetters 也类似,只不过它映射的地方不是计算属性,而是组 ...
- vuex 中关于 mapGetters 的作用
mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中.它的功能和 mapState 非常类似,我们来直接看它的实现: export function mapGett ...
- vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations
1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...
- vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
- vuex中module的命名空间概念
vuex中module的命名空间概念 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的. 弊端1:不同模块中有相同命名的mutations.action ...
- Vuex中mapState的用法
Vuex中mapState的用法 今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue ...
- Electron-vue实战(三)— 如何在Vuex中管理Mock数据
Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...
- SQLSERVER中NULL位图的作用
SQLSERVER中NULL位图的作用 首先感谢宋沄剑提供的文章和sqlskill网站:www.sqlskills.com,看下面文章之前请先看一下下面两篇文章 SQL Server误区30日谈-Da ...
随机推荐
- 【转】unity自带寻路Navmesh入门教程(三)
http://liweizhaolili.blog.163.com/blog/static/16230744201271225812998/ 继续介绍NavMesh寻路的功能,接下来阿赵打算讲一下以下 ...
- hihoCoder #1867 GCD
在集合 $[n]$ 上使用容斥原理. 固定 $i$,考虑有多少个 $j \in [n]$ 满足 $\gcd(i, j) = \gcd(a_i, a_j) = 1$,将此数目记作 $f_i$.暂时不考虑 ...
- [WC2013][luogu4074] 糖果公园 [树上带修改莫队]
题面: 传送门 思路: 一道实现起来细节比较恶心的题目 但是其实就是一个裸的树上带修改莫队 好像树上莫队也出不了什么结合题目,不像序列莫队天天结合AC自动机.后缀数组...... 莫队学习请戳这里:莫 ...
- 蔬菜(vegetable)
蔬菜(vegetable) 题目描述 题目背景:您使用脚本刷出了上题游戏 998244353 关的最高分 (最优解),心满意足的准备点继续学习,忽然一条弹窗弹了出来:你想明白活着的意义吗?你想真正的. ...
- 密码 (pasuwado)
密码 (pasuwado) 题目描述 哪里有压迫,哪里就有反抗. moreD的宠物在法庭的帮助下终于反抗了.作为一只聪明的宠物,他打算把魔法使moreD的魔法书盗去,夺取moreD的魔法能力.但mor ...
- bzoj3609【HEOI2014】人人尽说江南好
题意:http://www.lydsy.com/JudgeOnline/problem.php?id=3609 sol :博弈论 通过打表找规律,发现答案是%m循环的,且当m为偶数时取反 因为我太 ...
- webRTC前世今生
WebRTC 的前世今生 本文由 rwebrtc 翻译 WebRTC 技术是激烈的开放的 Web 战争中一大突破.-Brendan Eich, inventor of JavaScript 无插件实时 ...
- jquery 实践操作:div 动态嵌套(追加) div
此片记录在指定 div 中动态添加 div html(): append(): 在被选元素的结尾(但仍在元素内部)插入指定的内容. 语法: $(selector).append(content); / ...
- Codevs 1085 数字游戏
1085 数字游戏 2003年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 丁丁最近沉迷于一个数字游戏之中 ...
- 多表的时候怎样在MVC VIEW中显示
原文发布时间为:2011-04-01 -- 来源于本人的百度文章 [由搬家工具导入] Linq join query displayed in MVC view Instead of returnin ...