挑战全网最幽默的Vuex系列教程:第五讲 Vuex的小帮手
先说两句
前面已经讲完了 Vuex 下的 State
、Getter
、Mutation
及 Action
这四驾马车,不知道大家是否已经理解。当然,要想真正熟练掌握的话,还是需要不断的练习和动手实践才行。
其实只要把这四驾马车完全熟练驾驭了,那么应对一些中小型的项目,基本上就已经没啥问题了,后面的 Module 这架终极马车,其实是为了搞定那些稍微大型复杂一点的项目,避免 store 里面的数据太多,难以管理而设计,这驾马车稍微比较抽象,不太好驾驭,我们下一讲再来详细的去剖解它。
Vue 里面的很多配套设施,在使用体验上一直都追求着简洁,追求着极致,哪里不爽改哪里,所以这也是为什么 Vue 能够长时间深得民心的一个很重要的原因所在。那么这一讲,主要就和大家简单的聊一聊 Vuex 的一些常用的辅助函数。
mapState
通过前面的学习,我们知道,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。
那么,当一个组件需要获取多个状态的时候,怎么办?是不是这样:
export default {
...
computed: {
a () {
return store.state.a
},
b () {
return store.state.b
},
c () {
return store.state.c
},
...
}
}
当然,这样是没问题的,但是总感觉写起来很难受,看起来更难受是吧!既然这么容易我们就感受到了,Vuex 能感受不到吗,能忍得了吗?
绝对不能忍,所以 mapState
辅助函数被创造了出来,用来搞定这个人人为之咬牙切齿的痛点。
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
a: state => state.a,
b: state => state.b,
c: state => state.c,
// 传字符串参数 'b'
// 等同于 `state => state.b`
bAlias: 'b',
// 为了能够使用 `this` 获取局部状态
// 必须使用常规函数
cInfo (state) {
return state.c + this.info
}
})
}
通过上面的示例,可以了解到,我们可以直接把需要用到的状态全部存放在 mapState
里面进行统一管理,而且还可以取别名,做额外的操作等等。
如果所映射的计算属性名称与 state
的子节点名称相同时,我们还可以更加简化,给 mapState 传一个字符串数组:
computed: mapState([
// 映射 this.a 为 store.state.a
'a',
'b',
'c'
])
因为 computed
这个计算属性接收的是一个对象,所以由上面的示例代码可以看出,mapState
函数返回的是一个对象,现在如果想要和局部的计算属性混合使用的话,可以使用 ES6 的语法这样写来大大简化:
computed: {
localComputed () {
...
},
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
了解了 mapState
辅助函数后,接下来的几个辅助函数的用法也基本上都差不多了,我们继续往下看。
mapGetters
这个和 mapState
基本上没啥区别,简单看下官方的例子,就懂了:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
取个别名,那就用对象的形式,以下示例的意思就是把 this.doneCount
映射为 this.$store.getters.doneTodosCount
。
mapGetters({
doneCount: 'doneTodosCount'
})
mapMutations
直接看示例代码:
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
// 将 `this.increment()` 映射为
// `this.$store.commit('increment')`
'increment',
// `mapMutations` 也支持载荷:
// 将 `this.incrementBy(amount)` 映射为
// `this.$store.commit('incrementBy', amount)`
'incrementBy'
]),
...mapMutations({
// 将 `this.add()` 映射为
// `this.$store.commit('increment')`
add: 'increment'
})
}
}
简直不要太好用,连载荷也可以直接支持。
mapActions
和 mapMutations
用法一模一样,换个名字即可。
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
// 将 `this.increment()` 映射为
// `this.$store. dispatch('increment')`
'increment',
// `mapActions` 也支持载荷:
// 将 `this.incrementBy(amount)` 映射为
// `this.$store. dispatch('incrementBy', amount)`
'incrementBy'
]),
...mapActions({
// 将 `this.add()` 映射为
// `this.$store. dispatch('increment')`
add: 'increment'
})
}
}
想要在组件中调用,直接 this.xxx
就完了。
写在最后
不得不说,Vuex 在使用体验上面真的是用心良苦,用好这些辅助函数,将会大大增加我们的开发效率,当然,有任何问题,欢迎留言,咱们一起交流。
转载声明
作者:大宏说
链接:https://www.jianshu.com/p/c9b8bbaca875
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞
、收藏
呦,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...
胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!
挑战全网最幽默的Vuex系列教程:第五讲 Vuex的小帮手的更多相关文章
- Vue.js 系列教程 4:Vuex
这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...
- 挑战全网最幽默的Vuex系列教程:第一讲 Vuex到底是什么鬼
先说两句 官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼 ...
- 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter
先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...
- 挑战全网最幽默的Vuex系列教程:第三讲 Vuex旗下的Mutation
写在前面 上一讲「Vuex 旗下的 State 和 Getter」,告诉了我们怎么去使用仓库 store 中的状态数据.当然,光会用肯定还不够,大部分的应用场景还得对这些状态进行操控,那么具体如何操控 ...
- 挑战全网最幽默的Vuex系列教程:第六讲 Vuex的管理员Module(实战篇)
写在前面 这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲.如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点. ...
- Python Twisted系列教程9:第二个小插曲,Deferred
作者:dave@http://krondo.com/a-second-interlude-deferred/ 译者:杨晓伟(采用意译) 可以从这里从头来阅读这个系列 更多关于回调的知识 稍微停下来再思 ...
- 【全网最全的博客美化系列教程】08.自定义地址栏Logo
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 全网最贴心webpack系列教程和配套代码
webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...
- 【全网最全的博客美化系列教程】01.添加Github项目链接
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
随机推荐
- iOS sign in with Apple 苹果ID登录
http://www.cocoachina.com/articles/109104?filter=ios https://juejin.im/post/5deefc5e518825126416611d ...
- 解决Pycharm导入当前项目的.py文件错误
如图所示错误,由左边导航栏可见.py文件存在: 解决办法:右键单击导包错误文件所在目录,选择[Mark Directory as]+[Sources Root] 错误已解决:
- [noip2012]国王游戏<贪心+高精度>
题目链接: https://vijos.org/p/1779 https://www.luogu.org/problem/show?pid=1080 http://codevs.cn/problem/ ...
- LM拟合算法
一. Levenberg-Marquardt算法 (1)y=a*e.^(-b*x)形式拟合 clear all % 计算函数f的雅克比矩阵,是解析式 syms a b y x real; f=a*e ...
- 深度使用JSON.stringify()
按照 JSON 的规范,使用 JSON.stringify() 做对象序列化时,如果一个属性为函数,那这个属性就会被忽略. const data1 = { a: 'aaa', fn: function ...
- Go语言笔记(1)变量的定义与赋值
变量的定义与赋值 在go笔记系列开始之前,我强烈建议大家使用Goland的IDM,配合vscode使用真的非常亲民. 1.go程序基本结构 首先,是go程序的基本结构,主要有package引入包.im ...
- Centos下载新版内核
下载新版内核的安装文 ...
- GitHub 热点速览 Vol.15:Background-Matting 让你秒变专业抠图师
作者:HelloGitHub-小鱼干 摘要:如果要选一个词来概述上周的热点,春风拂过,应该是一个不错的词.新项目像春天冒出的枝芽,朝气蓬勃,虽然获得的 star 不如之前三维 Vim 抢眼,但胜在多姿 ...
- 家庭记账本app进度之下拉框和数字转轮的相关应用
这次主要是悬系的下拉框Spinner和数字转轮NumberPicker的使用.先分析相关的用到的知识点. 在Android中,用string-array是一种简单的提取XML资源文件数据的方法. 例子 ...
- flask-文件上传的使用
flask-文件上传 在flask中使用request.files.get来获取文件对象 对获取到的文件对象可以使用save(filepath)方法来保存文件 上传的文件在保存前需要对文件名做一个过滤 ...