卜娃娃|Vuex 映射完全指南
作者：前端先锋
转发链接：
前言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:userdata:{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',])}}
推荐阅读
- 娃娃|娃娃机里现真娃娃，工作人员懵了：从哪进去的
- 东方网娱乐|娃娃脸演不了主角？到底是什么真正让演员闪闪发光 | 东小娱日爆社 2020.10.19
- 潮人看时尚|林依晨剪娃娃头走红毯，绿眼影配绿裙手臂粗一圈，造型一言难尽
- 袁嘉敏|34岁袁嘉敏因性感身材再度走红，被媒体称赞是“行走的芭比娃娃”！
- 封面新闻|四川一娃娃机里现真娃娃，网友灵魂拷问：钻进去想干啥？
- 娃娃|四川一娃娃机里现真娃娃，工作人员：你从哪进去的？
- 封面新闻|四川一娃娃机里现真娃娃 工作人员惊呆：你从哪钻进去咧？
- 大喜子|与朋友一起比赛抓娃娃，乐趣无穷！，迷你世界：玩家自制抓娃娃机
- 星八客|7号房的礼物原来曾被三国翻拍过？原版漂亮土耳其版是洋娃娃吧
- LPL|解说娃娃谈八强：LPL较往年少了一个大哥，DWG毫无翻车可能