00:00
好嘞,各位,那在这一小节呢,我们给大家讲一个store里面全新的配置项,叫做getters,目前呢,我们知道store里面有三个核心的配置性,来看图说话,分别是actions mutations state,既然我给你讲的这个gets没有出现在这个图里,那就意味着它不是一个必须要使用的东西,那接下来呢,我说一个场景,把它引出来,回到我的页面里,我要改需求了,就是在这儿呢,加一句话,哎,叫当前求和,放大十倍后尾,就比如说你这如果是三,那这展示的就是30放大十倍吗?来,其实我们可以直接写的啊,各位你找到这个组件,然后在这儿呢复制,然后呢给它改的小一点,比如写一个H3,叫当前求和,写上放大十倍后尾,那在这各位直接乘个十是不就得了,功能已经实现了,来刷新看效果,走走走走走,你这五,那我这就50呗,啊,但现在啊,有这么一个问题,各位来回。
01:00
叫代码当中,就是我的逻辑不是放大十倍这么简单,就比如说我要乘十除二取3IN值,再开根号,很复杂的一个数学运算,说老师没事儿,不管多复杂,你直接写在这儿就可以了啊,不就写一次吗?诶注意了,不是写一次,是写很多次,也就是说你保存在state中的那个东西啊,是sum,比如说这值呢,是八,哎,目前是八,很多程序员啊,都要使用这个SUM8,那是不是通过这种方式拿过来直接用就得了呀,但是还有一部分程序员呢,想把你这个sum按照一定的数学规则进行加工,你比如说sum,然后加二减一,然后乘九,就是很复杂的一个数学运算,运算完了之后再在页面上做呈现,并且这个运算的逻辑是固定的,而且很多程序员都要用这个数学运算,那同学你想想就不太适合直接自己在这写了,难不成你让那么多程序员都在这儿乘十减九,然后加三。
02:00
然后各种写开根号什么的吗?不可能是吧,能不能写一套,然后呢,让很多程序员都去复用,其实在这儿呢,有些人可能会想到这个东西叫做计算属性是吧?各位哎,说老师简单,你看啊,我教你在这写一个computed计算属性吗?然后在这里边你不是想要那个十倍后的核吗?那我在这写一个大核对吧?哎,大的和好了,老师在这我告诉你return,然后你这这么写this点你就正常啊老师你取掉这个和啊,然后呢,你给它乘以一个十就得了,诶这小逗号一补说老师你看这儿,诶,直接给它删掉是吧,我写一个大盒啊同学就先这么搂,先这么写着啊,回头刷新一波,各位来,你看功能实没实现实现了,但是同学你要想好啊,你写这计算属性吧,只是说你自己这个组件能复用,就比如说我还想再写一句这个话,那在这儿确实能复用对吧,两个那你看呗,走是不但别人想用呢,哎计算属性同学跨组件就不能用了,对不对,只适用于当前组件,哎,所以说撤回来走走啊在这呢不。
03:00
直接写,那怎么办呀,就得借助我刚才说的那个新的配置项了,就是gets,那我先把这个呢给它删掉啊,好保存过来,那打开这个store配置项,同学,Actions用过了,Mutations用过了,State用过了,接下来再来一个叫做什么来着gets啊,当然也得定义成这个变量这种形式gets,然后等于诶cost gets,然后在这呢,等于直接写一个对象,那对象里面写什么呢?各位接下来啊,你就去给你那个放大十倍后的和啊取一个名字啊,比如说在这呢,我就叫做big sum,什么意思呢?就是大盒呗啊小驼峰啊sum好走,直接告诉大家啊,这就不卖关子了,这个big sum是能收到参数的,收到的参数是什么呢?就是这个state,然后呢,它跟你那个计算属性啊可像了呢,它都是靠返回值来决定自己的值,同学你写个计算属性里边是不是得靠return去决定那个值啊,我刚才刚写完对不对啊,那在这呢,同学state点什么呢?Sum。
04:00
哎,拿到这个盒,然后呢,乘以十,哎,你就假设这是一个非常复杂的这个逻辑,Gets是不是准备好了,来把这个呢,给它复制一下,叫做准备什么呢?Gets用于干嘛呀?哎,就得这么写了,用于将将什么呢?State中的数据进行加工。哎,那你看我这是不是sum,那在这儿呢,我是不是乘以十了呀?好各位,Get特S这个配置项写完了,你得配置进去,因为这一小节开始一上来我就说是死道里的一个全新配置项,对吧?各位你得配进来,OK,写了吧,好各位,这回这个big sum就可以用了,那在哪去用呢?啊同学你想想呗,回到组件里面了啊,我不能亲自写这乘以十来,哎,那这得怎么写呢?对吧,怎么能拿到它呀,大家想想,无论你怎么拿到它,你必须得找这个人,就是到了福死到你说对吧?哎,什么state呀,Dispatch都得找人家呀,所以说各位我把这儿呢,给它折叠起来,往下看,咱们这个组件一挂载是不是输出this呀,这回我直接一点,别输出这this了,直接输出this身上的Dollar符道,OK,不回到这儿刷新一波,各位从这个Dollar佛store出发啊,说老师我明白,找state完找这呀,没有啊,老师怎么还是sum呢?很正常吗?各位你想想你的这个state里面可不就。
05:22
跟配置一个sum嘛啊,State里的东西你当然去找state,那么但现在它不在state里,在哪儿是吧,Gets里,所以说各位来刷新一波,你知道找谁去在这儿呢?Gets说老师不行,这不是空对象吗?同学,打开它,你看big sum是不是在这?说老师这怎么还是零呢?零放大十倍后,那不还是零吗?那回到这我给你改一下初始值啊,不是零,是九,同学这回回来刷新一波,瞧着啊,找到state里的sum确实是九,找到gets里的big sum是多少?90,这不就结了吗?啊,怎么获取啊,到点s.big sum OK,好了,那这回回到代码里,你知道应该怎么写了,来到这啊,找这块呢,撤回来,其实跟刚才啊是差不多的啊,那这样吧,我直接把这个给它复制过来,嗯,我本来想撤回来的,是吧,差之语法走,然后别找这state gets,然后找谁呢?不是sum了,加个词big some s呢,要大写好保存,回头看一下效果啊,刷新啊,九九九十呗,走。
06:22
啊,我把这九呢,还是给它改成一改成零吧,哎,一上来是零,好了,加走是不是实现了,所以说同学这个getters也不见得你非得就去使用啊,哎,大家感受一下,你觉不觉得这个东西其实是数据源,哎,完了,这个粉色的getters呢,是拿着数据源里的东西进行一番加工,然后再给你,对不同学像极了谁和谁的关系?嗯,你品味一下,觉不觉得它像极了我们view配置项里的data,那你觉不觉得它像极了我们配置项里的谁来着呀,对不对,各位数据在这儿呢?根据数据计算出来一个新的,那你看这儿呢?啊,View X里的数据在这儿呢?根据数据计算出来一个新的,这就是gets的使用,而且借助V的开发者工具啊,你是完全可以看到这个gets的啊,刷新一波,然后呢,点击第二个选项卡,然后点击一下各位你看有state sum0,有gets里的big sum也是零,然后你点一下加啊,然后。
07:22
这呢,再点一下,同学,你看这是一,这呢是十对吧,各位,哎,我把整个这个流程呢也写好笔记了,在这gets的使用概念就是当state中的数据需要经过加工后再使用时啊,但咱也说同学不是说你要想加工就必须得用这个,自己亲自写逻辑是不是也行,但是如果逻辑复杂,并且逻辑还想复用,那么推荐你使用什么呢?Gets OK啊,在这这么写这么写,然后组件中怎么读取呢?我在这就给大家写好了,到点get.big sum啊,值得你注意的是同学得写返回值啊,得写返回值好了,那这小节呢,我们停。
我来说两句