Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

Chase620 等级 602 0 0

1、mapState和mapGetters的作用

  mapState用于将state中的数据映射到组件的计算属性中,而mapGetters用于将getter中的计算属性映射到组件的计算属性中,之前获取Vuex数据都是通过$store找到state对象,再去state中去拿数据,操作getter,mutation,以及action都会是如此的不方便,因此,Vuex提供了一些辅助函数帮助快速的拿到数据。

2、mapState的使用

   主要是获取数据的辅助函数,为了解决需要获取多个状态且不再那么重复以及冗余的问题,mapState会帮助我们自动生成计算属性。

类型一:组件计算属性名和Vuex中的状态名不一致

    比如组件中需要获取Vuex中count数据的内容,但是在组件中有可能也有一个同名的count数据,因此在获取Vuex中的count时,组件的计算属性就不能为count了,因此这时计算属性名和Vuex的状态名不能一致。

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

index.js

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

Vuex.vue

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

执行结果

    计算属性的函数第一个参数为Vuex中的状态state,因此可以通过state直接获取数据,计算属性值为函数,如果只是获取Vuex中数据并映射到组件计算属性上,可以使用简写,如果计算属性需要组件自己的数据进行逻辑操作,写完整的函数

1、完整的写法:

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

Vuex.vue

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

运行结果

2、简写:

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码(简写1)

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码(简写2)

类型二:Vuex状态名和计算属性的名称一致

如果Vuex的state的状态名和映射的计算属性名完全一样,那么mapState可以直接传字符串数组来映射数据

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

3、组件自己的计算属性处理

  如上所示,计算属性是已经被mapState占满,那么也就是说组件的所有计算属性都是从store映射过来的,如果组件它本身也有计算属性呢,那么就需要采用解构的方式去做,简而言之:将mapState对象返回到一个大的新对象中去。

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

执行结果

4、mapGetters的使用

  mapGetters是Vuex提供的将store中的getter映射到组件计算属性中的辅助函数,mapGetters使用方式和mapState一样,最常见的方式就是解构的方式。

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

如果组件自身与Vuex中的状态名不能一致时,需要按照之前的写法写

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

本文转自 https://www.jianshu.com/p/eef5213c14c4,如有侵权,请联系删除。

收藏
评论区

相关推荐

vue高级进阶系列——用typescript玩转vue和vuex
       用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对vue的状态进行统一管理,如下图介绍了其管理模式: im
通过一个简单实例了解vuex
简单说明 什么是vuex,vuex怎么使用,什么场景下适合使用vuex, vuex 文档(https://links.jianshu.com/go?tohttps%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)中都有介绍。看完文档之后,都知道vuex的核心有State、Getter、Mutation、Action、Modul
Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。 Vuex 4 正式版本现已发布。 Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3,并提供了与 Vuex 3 完全相同的
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
vue: 解决vuex页面刷新数据丢失问题
一、问题描述 1、一般在登录成功的时候需要把用户信息,菜单信息放置 vuex 中,作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被清空。 2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎
记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
Vue方向:Vuex状态管理:Action异步函数
1、Action的使用        Action类似于mutation,不同之处在于Action提交的是mutation,而不是直接更改状态,Action可以包含任何的异步操作。 2、定义以及使用Action代码 3、分发Action代码代码action 4、Action函数参数
veux的使用
1)说说什么是vuex(下定义)2)vuex解决了哪些问题,为什么要用(必要性)3)怎么使用vuex(使用方法)4)描述vuex原理,提升答案深度(深层原理升华答案)vuex的流程图分析:我们可以看到图中虚线框包裹起来的部分就是vuex的三个组成部分(Action,Mutations,state),我们来简单的捋一下整个流程:首先vue的组件在响应用户行为交
Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters
1、mapState和mapGetters的作用      mapState用于将state中的数据映射到组件的计算属性中,而mapGetters用于将getter中的计算属性映射到组件的计算属性中,之前获取Vuex数据都是通过$store找到state对象,再去state中去拿数据,操作getter,muta
Vue的学习笔记(上篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 二、什么是vmodel指令?vmode
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和
Vue3现状报告及未来规划
近况158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。对比去年Devtools:110 万 158 万(+43.6%) NPM:620 万 940 万(+51.6%)Vue 3.0 One Piece自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。Vue Router 4.0已经稳定。Vuex 4.0已经稳定。生态慢慢