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
英文原文地址：https://blog.logrocket.com/a-complete-guide-to-mapping-in-vuex/作者：Moses Anumadu
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
以上就是Vuex中映射的完整指南的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3023237.html
