「后端小伙伴来学前端了」Vuex进阶操作，让你的代码更加高效（简称如何学会偷懒【手动狗头】）

2024-06-02 04:42:54

学妹手机里的美照

前言

前一篇写了Vuex基本使用，用起来还稍稍有些繁琐，代码有很多
冗余的地方，这篇就带着大家用更简单的方式来使用Vuex（其实就是怎么更好的偷懒，用更少的代码来完之前的事情）

进入正文…

一、mapGetters 方法

在我们之前要取出store中的getters，在组件中是需要$store.getters.bigSum 才能取到，为了方便会写成计算属性

bigSum(){return this.$store.getters.bigSum
}

一个两个还能接受，但是如果有很多的，代码会显得十分冗余。不太合适，作为一名合格的程序员，偷懒是必备的哈。

我们能想到的，前辈们都已经考虑到了。所以就有了mapGetter辅助函数。

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

//第一步得先引入
import {mapGetters} from 'vuex'// 第二步 写在计算属性中
computed:{// 之前的写法// bigSum(){//   return this.$store.getters.bigSum// }//借助mapGetters生成计算属性：bigSum（对象写法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法）// ...mapGetters(['bigSum']),
},

实现效果都是一样的。

如果有多个值需要映射的话,...mapGetters({bigSum:'bigSum'},{xxxx:'xxxxx'}), 或者...mapGetters(['bigSum','xxxx'])都是可以的，极大的压缩了代码。

二、mapState方法

之前要从store 中取得 state 的话，有下面两种方式

$store.state.sum 或者是下面这种计算属性的方式，但是仍要我们自己写。

  computed:{sum(){return this.$store.state.sum}},

自动生成方法，和上面的那个mapGetter 是一样的

// 引入的时候多引入一个 mapState
import {mapGetters,mapState} from 'vuex'// 计算属性
computed:{// sum(){//   return this.$store.state.sum// }//借助mapState生成计算属性：sum（对象写法）...mapState({sum:"sum"}),//借助mapState生成计算属性：sum（数组写法）...mapState(['sum']),
},

即使是多个也会非常方便，自动生成是真的香（

「后端小伙伴来学前端了」Vuex进阶操作，让你的代码更加高效（简称如何学会偷懒【手动狗头】）相关推荐

「后端小伙伴来学前端了」Vuex 基本使用及案例，快速上手，学会使用vuex
从好看的学妹那收集的好看照片--
「后端小伙伴来学前端了」Vuex原理图分析及结合生活案例让大家快速理解
来自一名超级美的学妹:
「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性
前言最近老师让大家单独写前后端分离项目,真是大家卷完后端,一起去卷前端了.(我以前都是主要负责后端,处于只大致看的懂的级别,说多了都是泪啊). 真是处于一边学一边写的状态,基本就是每天早上看上两~三 ...
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了
依旧还是学妹给的封面直接进入主题-在vue中使用个啥,都差不多是一个流程. 引入Echarts 安装 npm install echarts --save 我们写一个Echarts组件,在内进行引入 ...
「后端小伙伴来学前端了」CSS3伪元素选择器 ::before ::after | 记录自己的前端学习日子
写在前面:最近冷空气来临,大家注意保暖,如果有时间,也给许久未见的家人.朋友.那个你想见没去见的人打个冬日的暖心电话吧.别等了,就这次吧. 2021年11月7日,立冬之时前言本文适合前端小白,或者 ...
「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言学完Vuex方面的操作就该来学学Vue中的路由操作了- xdm冲一.安装 vue-cli 安装 vue add router 做完这一步基础环境都搭好了. 项目中会多一个文件夹,内容如下: ...
「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误？你有没有思考过？
清晨的☀ 前言我们都知道在 Vue 中并不只有纯正的CSS,还有less.sass等,后面这些,写起来都可以级联着,不需要像原生的css那样,会方便很多. 大家都知道我也是最近写的vue,看见周围人 ...

最新文章

热门文章