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 ...
随机推荐
- web自动化测试:watir+minitest(三)
本文,谢绝转载. 整体框架设计: 1.用例的解耦性.一个测试用例一个脚本.而并非minitest中的N个test写在一个文件中 2.单独调试与全量连跑或部分连跑 3.任意变量.参数配置.这点对后期维护 ...
- POJ 3249:Test for Job(拓扑排序+DP)
题意就是给一个有向无环图,每个点都有一个权值,求从入度为0的点到出度为0点路径上经过点(包括起点终点)的权值和的最大值. 分析: 注意3点 1.本题有多组数据 2.可能有点的权值是负数,也就是结果可能 ...
- Xcode打包和生成ipa文件
1.生成Archive文档 a) 需将左上角红色方框里的设备类型选为ios device,不能选择具体的设备类型,否则不能生成Archive文档: b) 中部选择Team的方框,可此时选,也在后续ex ...
- [LeetCode] Binary Search Tree Iterator 深度搜索
Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...
- Linux/Unix编程中的线程安全问题【转】
转自:http://blog.csdn.net/zhengzhoudaxue2/article/details/6432984 在目前的计算机科学中,线程是操作系统调度的最小单元,进程是资源分配的最小 ...
- 常见的 Git 命令:
开始一个工作区(参见:git help tutorial) clone 克隆一个仓库到一个新目录 init 创建一个空的 Git 仓库或重新初始化一个已存在的仓库 在当前变更上工作(参见:git he ...
- VIM使用技巧5
查找并手动替换.例如有如下一段文字: We' re waiting for content before the site can go live If you are content with th ...
- TCP/IP和HTTP协议与Socket的区别联系
参考资料: http://www.cnblogs.com/goodcandle/archive/2005/12/10/socket.html http://www.2cto.com/net/20121 ...
- hadoop(一)hadoop简介
1. Hadoop 版本衍化历史 Hadoop 是一个由 Apache 基金会所开发的开源分布式系统基础架构.用户可以在不了解 分布式底层细节的情况下,开发分布式程序,充分利用集群的威力进行高速运算和 ...
- Smpt命令顺序不正确。 服务器响应为: Error: need EHLO and AUTH first !
刚发现以前做的QQ邮箱发送邮件不能用了,查找了下原因:未加( EnableSsl SSL加密连接 )导致的,顿时觉得很坑,以前QQ邮箱也没有这个限制啊,可能是最近加的. 好吧不多说直接从头走起,照顾 ...