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

Chase620 等级 1039 0 0
标签: vuex前端

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: 解决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
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
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已经稳定。生态慢慢
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue 和 React 区别的一些笔记
> 作者:lihongxun945 > > github.com/lihongxun945/myblog/issues/21 这篇文章记录我在使用Vue和React的时候,对他们的不同之处的一些思考,不仅局限于他们本身,也会包括比如 Vuex/Redux 等经常搭配使用的工具。因为涉及到的内容很多,可能下面的每一个点都能写成一篇文章,这次先简单做