江苏龙网

  1. 主页 > 生活百科 > >

Vuex 映射完全指南

Vuex 映射


Vuex 映射完全指南

文章插图
 
作者：前端先锋
转发链接：https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ
前言Vuex 是一把双刃剑 。如果使用得当，Vue 可以使你的工作更加轻松 。如果不小心，也会使让的代码混乱不堪 。
在使用 Vuex 之前，应该先了解四个主要概念：state、getter、mutation 和 action 。一个简单的 Vuex 状态在 store 中的这些概念中操作数据 。Vuex 中的映射提供了一种从中检索数据的好方法 。
【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'        })    }}


推荐阅读


上一篇：喝明白普洱茶汤的滋味,易武普洱茶特点和口感怎样

下一篇：Nignx的安装和使用