Vuex 映射完全指南
// 每日前端夜话 第397篇
// 正文共:2600 字
// 预计阅读时间:8 分钟
Vuex 是一把双刃剑。如果使用得当,Vue 可以使你的工作更加轻松。如果不小心,也会使让的代码混乱不堪。
在使用 Vuex 之前,应该先了解四个主要概念:state、getter、mutation 和 action。一个简单的 Vuex 状态在 store 中的这些概念中操作数据。Vuex 中的映射提供了一种从中检索数据的好方法。
在文中,我将演示如何映射 Vuex 存储中的数据。如果你熟悉 Vuex 基础,那么这些内容将会帮你编写更简洁、更便于维护的代码。
本文假设你了解 Vue.js 和 Vuex 的基础知识。
Vuex 中的映射是什么?
Vuex 中的映射使你可以将 state 中的任何一种属性(state、getter、mutation 和 action)绑定到组件中的计算属性,并直接使用 state 中的数据。
下面是一个简单的 Vuex store 例子,其中测试数据位于 state 中。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
data: "test data"
}
})
如果要从 state 中访问 data
的值,则可以在 Vue.js 组件中执行以下操作。
computed: {
getData(){
return this.$store.state.data
}
}
上面的代码可以工作,但是随着 state 数据量的开始增长,很快就会变得很难看。例如:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
user: {
id:1,
age:23,
role:user
data:{
name:"user name",
address:"user address"
}
},
services: {},
medical_requests: {},
appointments: {},
}
}
})
要从处于 state 中的用户对象获取用户名:
computed: {
getUserName(){
return this.$store.state.user.data.name
}
}
这样可以完成工作,但是还有更好的方法。
映射 state
要将 state 映射到 Vue.js 组件中的计算属性,可以运行以下命令。
import { mapGetters } from 'vuex';
export default{
computed: {
...mapState([
'user',
])
}
}
现在你可以访问组件中的整个用户对象。
你还可以做更多的事,例如把对象从 state 添加到 mapState
方法。
import { mapGetters } from 'vuex';
export default{
computed: {
...mapState([
'user',
'services'
])
}
}
如你所见,这要干净得多。可以通过以下方式轻松访问用户名:
{{user.data.name}}
services
对象和映射的许多其他的值也是如此。
你注意到我们是如何将数组传递给 mapState()
的吗?如果需要为值指定其他名称,则可以传入一个对象。
import { mapGetters } from 'vuex';
export default{
computed: {
...mapState({
userDetails:'user',
userServices:'services'
})
}
}
现在可以通过简单地调用 userDetails
来引用 user
。
何时映射整个 state
根据经验,仅当 state 中有大量数据,并且组件中全部需要它们时,才应该映射。
在上面的例子中,如果我们只需要一个值(例如 username
),则映射整个用户对象就没有多大意义。
在映射时,整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中,因为这将是多余的,并且从长远来看会影响性能。
映射 getter
映射 getter 的语法与 mapState
函数相似。
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'firstCount',
'anotherGetter',
])
}
}
与映射 state 类似,如果你打算使用其他名称,则可以把对象传递给 mapGetters
函数。
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
first:'firstCount',
another:'anotherGetter',
])
}
}
映射 mutation
映射 Mutation 时,可以在用以下语法来提交 Mutation。
this.$store.commit('mutationName`)
例如:
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`
// `mapMutations` 也支持 payloads:
'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
]),
...mapMutations({
find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
})
}
}
映射 action
映射 action 与映射 mutation 非常相似,因为它也可以在方法中完成。使用映射器会把 this.$store.dispatch('actionName')
绑定到映射器数组中的名称或对象的键。
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`
// `mapActions` 也支持 payloads:
'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
})
}
}
总结
看到这里,你应该能够学到:
- 对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解
- 能够映射 Vuex store 中的所有组件(state、 getter、 mutation、action)
- 知道什么时候应该映射 store
- Reverse Linked List II
- python爬虫(六)_urllib2:handle处理器和自定义opener
- Hbase多版本的读写(Shell&Java API版)
- 总结---3
- Mac系统实现git命令自动补全
- [大数据之Yarn]——资源调度浅学
- Mac系统的终端显示git当前分支
- 不掌握这几个人工智能编程语言怎么能说懂AI
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
- 大数据之Yarn——Capacity调度器概念以及配置
- 移动端web开发,click touch tap区别
- 大数据学习之路(持续更新中...)
- 如何养成良好的c++编程习惯(1)——内存管理
- 使用jOrgChart插件实现组织架构图的展示
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode 392. 判断子序列
- LeetCode 5473. 灯泡开关 IV
- LeetCode 5472. 重新排列字符串
- BootStrap 导航栏实现下滑消失,上滑出现
- 七日Python之路--第六天
- 超性感的React Hooks(六)自定义hooks的思维方式
- 七日Python之路--第五天(之找点乐子)
- 超性感的React Hooks(七)useReducer
- 七日Python之路--第四天(之Django官方文档)
- 六、setTimeout与循环闭包经典面试题详解
- 七日Python之路--第四天
- 七、this
- 七日Python之路--第四天(之多线程)
- 超性感的React Hooks(八)useContext
- 七日Python之路--第三天(之不安分 wxPython)