Vue3.x全家桶 39_Vuex中的计算属性getters应用 学习猿地原创

大家好，我是学习园地的特约导师高若峰，上节课咱们学习了mutations，那什么是mutations呢？也就是我们在改变我们状态的时候，通过mutations改变，这是我们唯一的途径，而不是我们在组件里边直接去修改这个值，所以呢，必须经过它，经过它之后就可以通过DV to来观察它的值的变化，是这样的一个情况，那么在我们VEX里边一共有五个核心概念，当然了，这个是呃状态，这个状态呢，咱们呃，就是咱们要管理的，说白了就是在这个里边生成变量，对吧，然后有些学了，咱们在一个一个学，那这节课呢，咱们学习get。那get是什么？那它就相当于我们的计算属性，和我们计算属性是一模一样的，你比如说。我们如果在单页里面使用计算属性，比如说在后面里面，那么我们想改变这个数的时候，你看想改变这个数的时候，这个数呢，我们在哪改变呢？我们是在嗯这个位置改变的，对不对？点击按钮改变这个数，那我们这块再加一个通过计算属性要它的平方。对吧，这块是计算属性，计算属性我们先来再回顾一下，计算属性我们怎么改变这个值，那计算属性我们要它的平方值，我们就叫呃po呃，单页的模板呢，那就是自己页面的me po随便写的一个这个属性，那这个属性我们怎么能得到呢？那我们说了，计算属性在这里边我们使用。

嗯，Computer对吧，和计算机那个计算是一个意思，计算属性，那我们在这里边可以使用MY对吧？Po平方比时，就算这个数，点击的时候用这个数的平方给我们，那我们可以在这里边加一个这个，然后里边用什么，里边用钙的方法，然后我们在这里边去计算就可以了，这是这种情况，当然了，我们说如果里边只有一个钙的方法，那我们可以把它怎么的，可以把它简写这个就是一个方法就行了吧，对吧。那我们这里边直接返回什么，这次里边的cot乘以这次里的CT不就是平方吗？你看。Gut对吧，返回这个的平方，然后呢，我们把返回的结果，我们调用这个属性的名的时候，就相当于使用这个返回值，所以说计算属性干什么用的？就是当我们的状态需要经过一系列变化之后，显示在组件里面，或者显示在位置里边，模板里边的时候，那我们就通过计算属性来处理，非常常用计算属性，那我们现在看一下，我们打开这个程序，回到我们这里边。

最小化吧，我们刷新一下。嗯，我们找到最上边，你看积分属性在单一模板中使用的啊这样。诶，我们。没有显示出来看一下啊。看一下computer my。在这块。啊，这边显示YQ写错了，你看计算属性。你看864是不是它的平方对吧？那当然了，除了这个基本属性，咱说了所有的都是在这里边，那用计算属性，我们在VEX里边的值，也就是我们在这里边的属性值，比如说A，那我们能不能用计算属性来算呢？也可以比如说。

我们在计算属性里边，在这块我们再加一个，你看再加一个，加一个呢叫什么呢？叫v u exx里边呢，计算属性，比如说平方。我们这个便利名随便起的啊，那你看我们可以直接在这里边返回return，那使用这次里边吧，什么store是不是找到我们的什么状态对吧，找到我们状态这个找到我们的v exx这个存储啊，对吧，里边的s sta，也就是找到我们这里边谁啊s sta对不对，那我想要这里边哪个数变，比如说nu变，那我们这里边就可以将什么点nu，然后乘以你看啊。乘以这个，这样的话，我们在页面里边，我们使用这个属性名，这属名单我自己这边定义的啊，然后我们就可以在我们这个里边，你看这是使用全局的，你看使用这个，那我们在这里边让它am变化的时候，我们在这块加上可不可以。加上这个属性，当然我得把它放到差值里边去，对不对，放到这里面来。

差值里面就是全，呃，是state中的。中的什么？嗯，计算属性计算。属性这中的平方吧，这还不能成啊，这个里边的计算属性来我们看一下，再刷新一下，然后这我每次都得刷新一下。你看零。这个是。呃，状态中的平方，那我这块逆加H2，那我这块来个D画好吗？你看出来。你看现在这里边改变的只是这里边了，所以呢，我是在单个模板中用的计算属性。单个模板计算属性，这个ST中的。状态中的平方ST。这怎么翻译的不？啊，另外。好，跟我们这写的不一样啊，你看三十六四十对吧，是样啊，因为他给我们翻译过来了。这个浏览器，您可以把翻译这个关掉。

你看是可以的，对吧。那现在如果我这个值用在你看我在本页面里边对状态用计算属性去计算的，本页面里边去用的，那它有一个什么特点呢。我在其他的页面里边，比如关于这里边我再使用可以吗？就用不了了。对吧。所以呢，在我们的VS里边给我们提供了一个计算属性get，那就和我们在单页里边做的计算属性是一样的，在单页里边做的计算属性在单模板里边只能在这个模板内部使用，而如果我在这个里边去声明的话，那就可以使用了，比如说咱们前边改变这个值，咱说都通过U对不对，那所有的呃，应用的情况我都给你写了一遍了，那这里边呢，它还有一个模块，当然这跟顺序没关系啊，它那默认没给我们加那个胶加工件的时候，那我们自己写get。也是一样的，这么起来，然后呢，这里边我们就可以写一个基本属性，比如说我们计算它的平方，这里边咱们就写，呃，VX的nu在这里边的，或者是叫什么名都行，或者叫get啊，或者叫什么的都可以啊，然后。

你看get里边的这个，它默认也给我，因为我们想继承这个属性对不对，所以默认第一个参数，第一个参数s sta，当然你变列名起什么都无所谓，只要记住第一个参数。啊。第一个参数就是谁呀，ST，也就是上面是这个值，那么我们在这里边计算它这个属性，那我们就很容易了，你比如说我们返回return。直接这个参数里边不就有吗？里边有什么nu，所以呢，我想乘以nu对吧，乘以TTe.nu不就可以了吗？这是也是求平方了，很简单的一个事情就就搞定了，你看用法跟我们在computer里边单页里边用法是一样的，那调的时候呢也是一样，我们也不用存参数，比如说我现在想在。嗯，这个地方你看在哪个地方掉呢。呃，还是在这块吧，在这块我们现在用一个HR调用。嗯，使用嗯，GTT中的计算属性计算。

属性这里它是计算属性，然后在这里边用的时候，你看我们既然写的get里边了，所以在这里边使用刀tre肯定是能找到我们VX对吧？全定变量在这里边，这里边呢，我们使用G，那我们就可以干嘛呀，我们get啊，我们就可以找到我们的那个计算属性，计算属性里边有一个我们自己声明的一个方法，V X um对吧，就是求平方的，但是你这边你这个叫什么名都行，比如说um的pow平方对不对，那我们围了不一样，我们把这个复制过来。到我们后面这块get这块来保存一下，现在你看一下。我们get中的计算属性，你看文计四是不是一样了，那现在它的好处是什么呢？我们可以在任何地方去使用，对吧？因为是写在什么无中的状态管理里边了。那我们可以在其他地方可以使用，就不像我们单页呢，只能在自己地方使用，那现在你看我这块盖的16，那我们现在现在是25了，对不对，那我们到这里边来。

你看是不是这值也是25对吧，那我再点击一下应该是六六三十六了。对吧，那我们得到这里边来，你看。也是36对吧。当然了，计算属性咱们说了，在在VEX里边，咱们保存的不光是这种简单的变量，什么都可以，比如说我把一个对象保存进去，咱们我就保存一个，比如说咱们说购物车在多个页面应用对不对，那我就放里边一购物车，比如说CRT cut list。看列表购物车它是一个速度对吧，那这里边儿我们放一购物车，比如说有个名字。呃，名字里边有一个。假如说咱们来一个。细说PHP。然后咱们来一个价钱，PI是十元钱对吧，然后。我们再来一个20。再来一个30。再来一个。

复制错了。这块行多放几个40 50 60，当然你也可以放数量，咱们前面做过购物车了，对吧，就后这个去掉，你看这里边可以放这些东西，那现在我想要这个购物车里边的所有的书的一个总和，我怎么做呢？是不是我就可以通过我们这里边做一个来做一个方法，对不对，得到书的总价钱toalal总价钱啊PIPI。对吧，然后默认你传个S也行，对不对，叫什么名无所谓，你要记得第一个参数接收的就是我们状态里边的，那现在我想计算它的总价钱，那咱们可以怎么办呢？是不是这里边state。这个就代表的是我们状态里边是不是有个吸引rt list就代表我们这个数组对吧，通过这数组里边我们是不是有个呃，Reduce对吧，Reduce我们第一个传S啊。参数我们得用一个括号。传这个总和，然后N就是里边的每一个元素，咱前面讲过了对吧，那然后呢，我们这里边让什么，让S加上谁呀。

呃，加上这个N里边的N代表每一个，这里边每一个元素，PC加上这个，然后默认让这个S等于零。这个重点我讲过这个属性，那我们看一下它的总和是多少，我们只要在任何地方使用的时候，我们把这个放到我们的这个页面，嗯，就在关于页面里边写，关于页面里边简单点对吧。然后我们来一个H3。购物车的总价，然后我们用差值。因为在哪个页面都可以用这个对不对，然后我们使用高里边的什么get gtt，呃，S点里边有一个什么，我们自己做的一个总数，对吧，这个总数。在我们的关于页面。

看一下我们这块有一个错误，看一下什么错误。S是没有定义的，等一下啊，我们在。这个里面。我们这块是说一个零，给它附上零，怎么写个S呢。来，我们刷新一下。正好。刷新点我报计算的总价没有给我们获取到，因为我们正好没怎么大，没有返回这个值，对不对，得需要返回值，你看210，你可以加一下这个是不是210对不对，你看十二十，30 60 100加上110 210是不是就给我们算出来了，所以呢，对象这块我们都可以用，那我们现在假如说你把购物车放在这里边就可以了。那现在比如说我现在还有一个需求，还有一个需求，什么需求呢。这是第一个，就是什么类型都可以做，还有需求，我现在想。知道购物车里边商品的数量，当然这里边没啥数量，就一个一购物车里边有几件商品吧，对吧，有几件商品，那如果想知道有几件商品，那怎么办呢？我们是不是这块返回的是购物车的数量，那我们其实可以在。

有好多种办法，比如说我们在应用的时候。这块我们再换一个。嗯，购物车的数量，那我们再做一个数量的一个方法，比如说这里边我们就叫做购物车的数量，吸引商品的数量，Gods nu，我们就这个，当然这个变量现在有吗？还没有对吧，先保存一下，然后我们在这里边就通过计算属性做一个。你看godsn勾车数量，当然第一个参数还是这个方法对不对，那你看我们可以怎么做，你看我们这块是，呃，所有的这个购物车的一个总价对不对。嗯，我先不做购物车的总价吧，我现在是把先不做数量，我现在做一个。呃，方法就是拿到这里边的，拿到这里边儿的，比如说大于30块钱的数，大于30块钱的数。

然后我再计算总价。拿到这里边大于30的。你看啊，那我做一个过滤，那直接。嗯，大于30的，那我们就不叫这个方法，我先把这个方法先去掉啊，我给你反过来，我想给你证明一件什么事情呢，就是我们在这个里边。你看它有好多种用法，什么用法呢？你看这里边也是对象的方式吗？At，这是咱们正常的用法，你看它也用到了这个过滤这样的方式，对不对？我想说的是第二个参数，那我们就是过滤一下要到我们这里边的。行吗？先不要他的购物车里边的数量，我把这个。嗯。这个去掉。去掉。我要什么，我要他这里边儿的商品，符合条件的商品，那我们这里边直接。商品，嗯，Get。大于多少的吧，就good大于多少的，那我们这块直接当这个名称，你可以最好是随便写啊。

你看返回。呃，返回什么呢，返回。嗯，这里边儿的ST。ST里边有一个，呃，CT购物车返回购物车，那我们用过滤file过滤的方法，那里边我们也传上什么轨调函数，嗯，这里边需要一个参数N。对吧，乘一个参数，当这里边N就代表里边的每一个商品，那如果N里边的什么price大于30。这个说法分别啊。大于30。这这个回到那个这头函数应该好理解吧，这个函数里边传一个N参数对不对，N代表里边每一个，如果每个价格大于30不就真嘛，它就返回真，返回真的它就会留下对吧？那我们现在看一下。在这里面。在里边用的吧，那我们是大于30的产产品，那我就直接用差值吧。

这块来一个来一个。返回看一下是不是大于30的商品，那这里边我们里边GS里边有一个。八名尽量你们也别随便起啊，因为随便起的话不容易。放到我们啊，这个里面比这个页面干净一些。你看。这里边儿我们直接打印的对象有一个价钱是40的，价钱是50的，价钱是60的，是不是就能把大于30的给我们拿过来，对不对？那我们把大于30的我们计算总价怎么做呢？大于三的计算总量。那我们现在你看这个方法大于37的总价。我们可以在这个后边。对吧，再加上。这不过滤了吗？对不对，过滤了我们再加上reduce，是不是也可以把我们这个去掉，但是我们现在想换另外一种方法不动做。或者是我们在这个里面，在这个里面你看啊，调用一下这个方法，它返回的不是这个吗？所以在这里边我们现在把这个改造一下啊。

嗯，复制一下，然后我们。整体一下。你看我这调用商品价钱是大于30的，拿过来，那我们可以在这里边粘过来，它，你看返回的不是这个，那我们这里边可不可以在这里边这么用的，你看。直接调用。这里的这个方法，比如说这一次里边的go这个的方法，这个方法给我们返回的是不是大于30的，然后再reduce对吧，当然这块有逗号。那我们就直接这么做，可不可以？这块给我们提示一个错误。你看告诉我们这个没有定义对吧，你这里边得算STT。你看这也不行。对吧。因为这次里边调用的是调哪的。是调用。这个里边的属性对吧，这个是在get这个里边的，那我们直接调用呢。

你看啊，把这个传进来直接用标用的。你看也不行，所以怎么办啊？我们后边还想用到这个计算属性，你看我们怎么做啊，第二个参数就是默认把这个，如果这里边有多个计算属性，有些计算属性想复用，就像我们这个已经过滤完的，我们再复用一下，因为这个有可能也单独用，对吧，有可能还作为其他的再去用。那第二个参数G就是把我们的。整个get给我们传进来，所以呢，既然把我们的get传进来，那我们想办法在这里边是不是就能调到get里边的方法了。对吧，那在这里边我们直接get里边。你想想对吧。直接调get里边了，这个是不是就可以了，那我们在这块，当然这块GET4啊加S，嗯，参数你自己命名叫什么都行对吧，不过它接收的就是我们的整个这个get d参数默认的你不传没有，如果你传的话，默认给我们传递下来的就是这个get，所以呢，现在你看这个我们可以单独用，刚才也已经看到了，对不对，然后呢，我们计算属性过滤，这个我们在这就可以了。

然后我们在这块GTS里边是不是有个gods GT。你看对吧，然后点reduce对吧，这个调用的不就是这个嘛，这个返回值吗？大于30嘛，然后我们再计算总量来，我们保存一下。你看保存总价是150，你看这些商品是不是150 40加60是100，再加五十一百五。就可以了，所以大家要知道第二个参数get里面，第二参数传的是get，代表整个这个，也就是为了在计算属性里边有一些已经用过的计算属性，对吧，我们想复用。开是这样的。就可以了。那我就说，那我能不能做一个方法对吧，这个获取总价钱的这个也就是在这块。在。这个我给你保存一下。嗯。

很心，注意一下啊。保存一下。我剩一把。当然这个成跟原来的结果是一样的，现在呢，有没有一个有一个这样的需求，比如说这个过滤多少对吧。保存错了，应该保存这个，你看过滤多少，我能不能自已输入指定啊，我要大于多少钱的对吧，商品或者小于多少钱商品。那也就是我们在。嗯。这里面比如说我们再单独写一个过滤吧，就单独写一个过滤，过滤商品的时候就拿这个。你再做一个过滤的单独。就不各位这个这个给你留着啊。Go ods商品自定义，Self自定义，就这个ST。假如说我们在调这个的时候，我们现在返回的是大于30的，这个没问题对吧，那我们这个方法我们拿到。还在这里边写吧，购物车总价，这购物车的数量对不对。

拿过来。这块。啊，这个。放到这来。这个自定义的，把原来程序留了一下啊，你看。在这里边两个是一样，对不对，那我能不能在这块存价格，比如说我存一个20，将它大于20的存50，它大于50的。可不可以这么做呢？传多少就是获取多少。那如果我在这儿可以算参数，想象一下这个是方法，那参数肯定没问题的，那这个参数是传给谁的呢？你想象一下在这块，我们第一个参数是这个状态对不对，第二个参数是get g g2第二个参数是get，对吧。那有的是第三个参数，没有第三个。所以呢，如果想用第三个参数，就想用这个参数怎么办呢，想想。你看我们这里边。这个就是这样。如果我们这里边返回一个这个回一个section，一个函数，我这里边传一个PI，一个价钱。

那。整个它是返回的是一个方法对吧，那我们在调用的时候。在这个地方调用的时候，是不是就是一个方法，这个方法调用哪个方法，是不是就这里边我返回的方法，那这个参数，这个参数不就给我们传到哪儿了，传到我们的。呃，在这个地方，也就是我们在这存参数的时候，这个参数就传给我们调用的这个方法里了，你就在里边再生明一个方法，再去接受参数就可以了。是这样的。当然这个方法我们可以写一个什么，可以写个回调，回调方法是可以的，你看我这里边，当然这个参数GT是get，因为在计算属性里边写的嘛，第一个参数永远是这个，第二参数是get，对不对，那在这里边如果我想用的话，也是返回，返回一个方法，在方法里边我们再返回一个。什么返回一个。这个。

你看再返回它，然后这里边儿这个是不是就变量了price。回去就变量了。你看是不是就一个60的，那我们现在如果在这块我们再修改。在我报里边正好写上大于20的，你看下边就大于20 30 40 50 60，是不是就大于20的，所以呢，我们想写一个带参数的，就可以这么去写。在里边算外边参数还留着对吧，因为这两个参数固定的，你想再加自定义参数计算属性，想要它是参数功能可扩展，你就这么写，当然这个方法我们可以写成什么，可以写成。呃，Re，每天什么一个PI价钱作为参数，然后。对吧，这个里边直接。因为直接不用理太了嘛，对吧，不给大块不用理太，用一行语句就可以解决，所以呢，这条语句我们可以变成这条语句。也是里边写的函数，这是一个参数，但有两个参数的话，你加括号是不是就可以了。

你看是一样的对吧，三十四十五十六十是一样的，那我这块再改变一下，你看一下。比如说哎40。就可以了，如果改30跟上面的就是一样的，一模一样的，对吧，那这就是我们。嗯，计算属性get，也就是VEX里边的get就理解成计算属性，那么在里边存去计算值的时候，不光是可以是对象类型，数组类型，什么类型都可以，对吧？默认第一个参数就代表的是这个状态，你从状态里边就可以取到里边的变量。就是这样的方式。然后第二个参数就是指我们本身的get对吧，从过get里边就可以调到里边的所有东西，长度啊什么的都可以。这是我们的这个计算，在在我们单页计算属性里边怎么应用。然后如果我们自己存参数在里边，如果想自己存参数的话，你看本身这个。当然本身它可以也做一个健康函数，本身传的是状态对不对，然后里边我们再返回一个自己的一个什么。

这个方法就可以了。你可以他们联系啊。然后里边返回状态就行了。所以想自己定义参数，里边再定一个方法就OK了。但他这里边如果大家对箭头函数不熟的话，看着是比较抽象，那你给他把拆写你就完这个再合过来，如果你用熟的话，箭头函数还是比较方便的。好，谢谢大家，这节课我们的嗯，Get就学完了，那mutations和get还有状态这三个部分都完事了，那咱们再下节课再往下学，好，谢谢大家这节课。