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 ...
随机推荐
- [ZJOI2012][bzoj 2816] 网络 network [LCT]
题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2816 思路: 第一个条件看完暂时还没什么想法 看完第二个,发现每一个颜色都是一个森林 进而想 ...
- 安装淘宝内核LVS
具体安装方法按照淘宝twiki来:http://kernel.taobao.org/index.php?title=Documents/Kernel_build. 但是有些问题是要注意的: 1. 修改 ...
- php读写文件要加锁
http://www.bubuko.com/infodetail-241753.html
- Number String(hdu 4055)
题意:给定一个字符串,I表示本字符要比前一个字符大,D表示本字符要不前一个字符小,?可大可小,问1~n的所有排列中,有多少满足条件 /* dp方程的设定比较显然,dp[i][j]表示选了i个元素,最后 ...
- 17.2.10 NOIP模拟赛 藏妹子之处(excel)
藏妹子之处(excel) 问题描述: 今天CZY又找到了三个妹子,有着收藏爱好的他想要找三个地方将妹子们藏起来,将一片空地抽象成一个R行C列的表格,CZY要选出3个单元格.但要满足如下的两个条件: ( ...
- .NET发布网站出现了一系列问题(1)---“无法显示XML页”的解决办法
原文发布时间为:2008-09-11 -- 来源于本人的百度文章 [由搬家工具导入] 原因之一: 这种错误是由asp.net 帐户没有在iis注册造成的。原因可能是.net framework 2.0 ...
- node 监听接口
var http = require('http'); var mysql = require('mysql'); var connection = mysql.createConnection({ ...
- [LeetCode] Maximum Depth of Binary Tree dfs,深度搜索
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
- 利用linux信号机制调试段错误(Segment fault)【转】
转自:http://blog.csdn.net/ab198604/article/details/6164517 版权声明:本文为博主原创文章,未经博主允许不得转载. 在实际开发过程中,大家可能会遇到 ...
- Android系统启动过程【转】
转自:http://www.cnblogs.com/bastard/archive/2012/08/28/2660389.html Android系统启动过程 首先Android框架架构图:(来自网上 ...