vuex 中关于 mapActions 的作用
mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中。和 mapState、mapGetters 也类似,只不过它映射的地方不是计算属性,而是组件的 methods 对象上。我们来直接看它的实现:
export function mapActions (actions) {
const res = {}
normalizeMap(actions).forEach(({ key, val }) => {
res[key] = function mappedAction (...args) {
return this.$store.dispatch.apply(this.$store, [val].concat(args))
}
})
return res
}
可以看到,函数的实现套路和 mapState、mapGetters 差不多,甚至更简单一些,实际上就是做了一层函数包装。为了更直观地理解,我们来看一个简单的例子:
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment' // 映射 this.increment() 到 this.$store.dispatch('increment')
]),
...mapActions({
add: 'increment' // 映射 this.add() to this.$store.dispatch('increment')
})
}
}
经过 mapActions 函数调用后的结果,如下所示:
import { mapActions } from 'vuex'
export default {
// ...
methods: {
increment(...args) {
return this.$store.dispatch.apply(this.$store, ['increment'].concat(args))
}
add(...args) {
return this.$store.dispatch.apply(this.$store, ['increment'].concat(args))
}
}
}
.
vuex 中关于 mapActions 的作用的更多相关文章
- vuex 中关于 mapMutations 的作用
mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中.和 mapActions 的功能几乎一样,我们来直接看它的实现: export funct ...
- vuex 中关于 mapState 的作用
辅助函数 Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖,下面我们来一起看一下: mapSt ...
- 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的 ...
- vuex中辅助函数的使用方法
mapState import { mapState } from 'vuex' export default { // ... computed:{ ...mapState({ // 箭头函数可使代 ...
随机推荐
- MFC 对话框阴影效果
在 OnInitDialog(Cdialog)里面添加 SetClassLong(this->m_hWnd, GCL_STYLE, GetClassLong(this->m_hWnd, G ...
- C 语言实现 php base64_encode
这是在网上找到的一段代码,因为需求不同,稍微做了下修改,有需要的朋友可以直接复制使用. unsigned char *base64_encode(const unsigned char *str, s ...
- Fence(codeforces 232D)
题意: 对于给定的a[1..n],定义区间[s,t]和[x,y]"匹配"当且仅当下列条件同时满足:1. t-s=y-x,即长度相同.3. t<x或s>y,即两区间没有交 ...
- 微信公众平台开发(71)OAuth2.0网页授权-摘抄
微信公众平台开发 OAuth2.0网页授权认证 网页授权获取用户基本信息 作者:方倍工作室 微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友 ...
- 安装配置Vim中文帮助文档
1.home/.vimrc是用户自己的vim配置文件,在这个配置文件中设置的配置只影响该用安装前的准备工作: 在home目录下列新建文件夹 : .vim ------------------> ...
- 使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法2
<input type="button" onclick="edit(${it.id?c})" class="layui-btn layui-b ...
- HDU 2036 改革春风吹满地【计算几何/叉乘求多边形面积】
改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 从壹开始 [ Ids4实战 ] 之四 ║ 用户数据管理 & 前后端授权联调
前言 哈喽~~~ 大家周一好!夏天到了,大家舒服了没有,熟话说,打败你的不是天真,是天真热!
- bzoj 5123: [Lydsy1712月赛]线段树的匹配
设f[0/1][x]为区间[1,x]的根向下 不选(0)或者选(1) 的dp pair<最优值,方案数>. 可以很容易的发现总状态数就是log级别的,因为2*n 与 (2*n+1 或者 ...
- 基于http的断点续传和多线程下载
HTTP协议的GET方法,支持只请求某个资源的某一部分: 206 Partial Content 部分内容响应: Range 请求的资源范围: Content-Range 响应的资源范围: 断点续传: ...