00:00
好嘞,各位,多组件共享数据呢,我们写完了,截止到目前呢,VX里面相关的知识呢,我们已经讲的差不多了,也就是说呢,你完全可以拿着我前几小节讲的东西啊,在开发当中直接去使用了,但如果说你想写的再好一点,各位强烈建议你听一下这一小节,因为在这一小节呢,我们会给大家讲这么一个东西,就是X里面一个稍微高级一点的写法,叫做VX的模块化编码,为什么需要模块化编码呢?回到代码里面,我们研究一下,别的地方不用看,我们只看view X里面相关的配置来打开这个文件,我把所有能折叠的东西都折叠一下,这是action mutations state gets,表面上看起来啊,挺清晰的,哎,说老师你看这不就是那三个核心配置项吗?啊,Action mutations state,这不就是那个计算的人吗?Gets,这不挺好的吗?同学,打开他们每一个人里面,我们看一看啊,打开这个actions,曾经啊,咱们给这个加和减啊,也写了两个action。后来呢,我们冷。
01:00
盯的一思考,哎,说这东西啊,不应该写啊,没啥用,因为里边没有业务逻辑啊,啊就给它注掉了,那在这呢,我就彻底给它删掉好,然后观察一下我的action里面有几个action,其实有两个,一个是加OD,一个是加wait,那请问大家,你说这两个action都是服务于哪个功能的呀?好像都是跟求和这个功能相关的,对不对?诶一个加一个减,其实在这儿来看呢,同学,这两个东西还好啊,目前没啥问题,就觉得还可以吧,是吧?哎,折叠起来没什么问题的,就是没什么问题嘛,啊没有必要非得说,哎呀它不好,因为它就两个嘛,还都是跟求和相关的,来打开这个,这里边有几个mutation呢,三个。那这会儿就有点不好了,来你听我说啊,各位,前两个这个加和这个减,你说是服于哪个功能的,好像是跟求和相关的吧,那再问你这个呢,各位这个矮的person是跟什么相关的呀?应该是跟那个人员管理相关的,当然我们这个人员管理有点low是吧?哎,只有增没有删改茶是不啊,那不考虑那么多同学,肯定是跟人员相关的,那你考虑一下各位,如果说你做的是一个电商系统,你已经维护好了使用网站的这个人员,那如果说你还有一个模块叫做订单模块,涉及到什么呢?下订单,取消订单,支付订单,难不成你还把订单所有相关的东西还写在这个里面啊,再来一个什么order apply什么的啊,订单支付,那如果说这里面再涉及到对商品的管理,比如说商品的上架下架,商品打折,那难道商品相关的东西还往这里写啊,倒也不是说不行,如果你的功能很多,那就会造成同学最后啊,你这个mutations已经看不了了,N多个。
02:40
程序员写了N多个功能,N个mutation,全往这里边塞啊,那这个mutations最后呢,就难以维护了,特别特别的臃肿,还有就是所有程序员都操作这一个东西,也容易造成get的版本控制里边的冲突,你说对吧?各位,哎,所以说我们的目标是什么呢?把不同分类的mutation放在不同的位置,OK啊,先分析着,至于说怎么写,一会儿再说折叠起来,我们再看谁呢?这个state,那同学们看啊,前边这三个你说是跟哪个相关的?是不是跟求和相关的?哎,说老师不对,你这学校名和前端,这怎么还能跟求和相关?同学你忘了吗?当时我们在写那个求和组件的时候,是不是就是为了能够多读出点数据,我们写了school和subject,你这当然可以写一个别的同学,你这和不是零吗?你再给他写一个,呃,相乘的积啊,或者除出来的那个结果对吧,相除的结果是都行,那在这呢,我就用school和subject,反正简单说各位这三个东西是为哪个功能服务的,哎,求和那个功能,那你说这个呢。
03:40
肯定是跟人员管理相关的嘛,那也就意味着各位最后你不可能这样去写东西,说求和的和啊,人员管理的那个人员列表,还有订单的数据,商品的数据等等很多的东西啊,宣传的这个数据都往这里放,那是不可能的是不?那也会造成这个state太大了,太臃肿了,不好维护,容易起冲突,是不是?各位哎,这会儿呢,就不墨迹了,折叠起来,然后再看这个gets,其实同学gets还好,对不?因为这里面同学我有一个big sum,这个big sum其实只是为哪个功能服务的呀,是不求和,但是同学你不要说啊,老师actions就没事,Gets就没事儿,是因为你这里面目前不涉及到其他的,你说对不?你这两个action都是求和相关的,你这个这个也是跟求和关的,那万一里边再有点别的呢,就比如说在这再写点别的呢,这再写点别的呢,对吧,各位,所以说我们的终极目标啊,是这样的,一堆action,一堆mutation,一堆state,一堆get,把它按照分类啊给它整理好,哎,那怎么写呢?各位非常简单啊,简单到不能再。
04:40
简单啊,我直接写一下,各位走写一个注释啊,叫做求和功能相关的配置,哎,你就正常写,写成一个对象啊,我就这么命名啊,各位叫做con options,啥意思呢?就是求和相关的配置吗?哎,等于它是一个什么对象,对象里面包含着什么呢?哎,肯定得有actionations,那同理还得有mutations state gets,哎,把这些呢都拿过来,Mutations这儿呢,State这儿呢,Gets写好啊,那除了有求和功能相关的配置,再来一份,那这个叫做人员管理对不对?哎,功能相关的配置,或者这么说吧,人员管理相关配置,求和相关配置,OK,好,接下来呢,分门别类的把它们整理好,打开action里边这两个action都是跟什么功能相关的求和,那就剪切走放在哪儿,放在这儿啊,一定注意是负责哪个功能的就把它放在哪个options里。同学。
05:40
这个东西随意命名,你叫佩奇都行啊,你这呢,叫乔治也行,但我为什么非得写什么什么options呢?想让大家更明白一点,OK,哎,你就整出两个对象就可以,但是里边这些你可不能换啊,这是关键词,OK,给它折叠起来,那actions是不是就空了呀?那就给它杀了起吧,然后呢,再打开这个mutations,这个加和这个减来给它带走剪切。
06:01
加和减是属于哎这的好,给它呢粘过来诶,折回来粘过来缩进呢啊,调好了折叠一下就可以了。好,这会呢,折叠起来,再往下看,同学mutations里是不是还有一个添加人呢?剪切走是属于谁的?爱属于他的啊,走,当然这会儿不能叫count options是吧?啊,得叫做person啊,人员嘛,相关的这个options OK,写完了啊,这块呢,折叠起来,那这个mutations是不是就可以?诶,删掉了。好再往下,同学,State里面中的这三个剪切走都是谁的呀?都是这个球和相关的,给它放在这儿缩进的,调一下来,走,嗯,放在这折叠起来好,那再往下,这个是跟谁相关的呢?跟这个person随时在这儿回车粘过来,OK,把它折叠起来,那state是不是可以杀了呀?好,再看这个gets里边只有一个big sum是跟谁相关的求和,所以说这一堆不要了啊,往上滑找到这儿啊,OK,写完了吧,嗯,那你看完全形成了两套配置,也就是说写求和相关功能的程序员只要动这个就可以了啊,那其他的呢?
07:02
那你看你是哪个功能呗,人员相关的,那你就动这儿呗,啊,可能有一些同学说老师不对啊,那你的人员相关的配置,你这action里边没东西,那怎么不删了呢?我不删,万一以后写呢,是吧?哎,留在这儿,把这个形式呢给他保留好,好了,求和的配置在这儿,人员管理的在这儿,接下来怎么办呀,使用这个配置对吗?那你说在这儿这么写对吗?不对的各位,他已经看不见actions mutations state还有gets了,而且我们自己心知肚明,各位,这个actions其实已经有两套了,一个是这里的actionence,还有就是这里的actionence,对吗?哎,那这得怎么写呢?啊,不管怎么写,反正这些东西给删掉啊,然后在这儿呢,就由我告诉大家怎么写了,说老师那你咋知道的呢?我看文档了呗,是不?诶讲课不就这么回事儿嘛,老师去看文档啊,把文档里的东西翻译一下,调整一下顺序,然后大家讲出来对吧?好了,在这呢,写这么一个东西叫做modus,注意是有S的,不是modu,是models啥意思,模块。哎,Models就是模块的复数啊,走对象,然后这里面的同学我这么写啊,我这么写清晰一点,我写一个A冒号。
08:06
Count options,哎,我再写一个B冒号什么呢?Person options,我这么写的含义就是各位这个死道里面所保存的东西都开始分类了,就是原来呀,你的死道里面啊,是这么保存东西的,有一个死道,死store里边呢,有这么几个东西来写一下啊,别嫌麻烦,Actionations啊,还有什么呢?Mutations,哎,还有这个state,还有这个可选的gets,这回啊,同学你一旦进行了模块化编码之后啊,它就变成了这个样子,道呢,还是那个,但是到里面有分类了,其中第一个是A,那么第二个呢是B,然后A里边有什么呢?Actions mutations state gets,然后B里边有什么呢?Actions mutations state gets OK,我在这就不写了,耽误时间,哎,就是有分类了啊,那分类的名呢,这个A和B呢,哎,完全是你起的,其实我问各位,如果在这我这么写,是不是就处罚对象的简写形式?
09:06
了啥意思啊?Store里边跟求和相关的配置的名字叫count options,以后想取东西的时候是不是得是count options state完了再点some,是这意思不?哎,给它折叠起来,但是在这儿呢,同学,我们是初学者啊,不知道大家不用什么简写形式给它撤回来,我就用A,我就用Bo OK,同学,你的viewvox配置已经改好了,那么接下来呢?嗯,关掉,看看整个应用目前是什么样子啊,回到这儿刷新一波,哎哟,我的天呐,头都大了是吧?各位首先看左边。求和案例啊,那个组件已经不出来了是吧?人员列表呢?虽然在这儿坚持着啊,但是这儿的数据没了,人员列表也没了,完了,控制台呢,还报错,哎呀,我的天,这可得怎么办呀?同学,你听我说啊,谁也不能一下子同时考虑好多问题,那接下来呢,我就这样做,同学回到APP里面不是有两个组件吗?别让他俩同时工作,我干掉一个。
10:03
同学说老师你为啥非得干掉一个,我得摁住一个去分析啊,一个分析明白了,那个不也懂了吗?所以说来到APP里面各位啊,先让这person组件呢受点委屈,不用我也不引入,哎,我也不注册,就相当于各位这文件啊咋的被我删了,其实你在这写着它也没有用了,任何地方也没有引入,也没有注册啊,也没有写标签是不好了,回来,那这回呢,同学,嗯,人员组件肯定是没了,然后呢,你读一下控制台的这个报错啊,他说不能够去读取什么玩意儿,一个LS属性在哪儿安y find的身上,我现在可以非常肯定的说,我不用考虑这个组件里的问题了,因为这个组件压根我就没用,那我的关注点就很集中了,我就去看看这个count组件里面到底出了什么事,到底哪里用到了这个LS是吧,各位,哎,好了,回来走找哪去呢?嗯,找到这个count组件,然后同学你上上下下呀,你打量一下,你说哪块用到这个LS了呢?
11:00
诶,看到这儿了,诶,画笔看一下啊,是不是在这儿?嗯,Person list.lengths朱老师,你说是不是这的问题呢?谁也说不好,那我就把这删了去,哎,完了写几个问号,看看它好不好啊,回到这儿刷新一波,哎呀,同学,甭说别的啊,我问你现在这个组件好像能出来了啊,当然我知道这些数据什么的可能还是丢着呢哈,我在哪,什么学习什么都没有,但是问你是是不报错了,哎,回来那就强有力的证明了,就是这儿啊引起的问题,但你不能说说老师能给他删了不就得了吗?你要解决问题,不是解决提出问题的人,你知道吧?哎,得把问题解决,同学解决意味着这个东西咋的了?这个person list咋的了?啊,他是安范的,不能在安范的身上读取LS吗?那咱就分析一下,他打哪来呢,往下看。他打哪来啊?同学,他打这儿来,是不是借助map state生成的这个person list呀,是不?各位哎,终归是个计算属性嘛,那同学说老师怎么拿不到了呢?我跟你讲啊,各位不仅仅是他拿不到了,这些人也都拿不到了,Some school subject说老师那这些人拿不到,这些人咋没报错呢?这些人拿不到多,他就是一个de,你在页面里面用的时候,De顶多他就是不呈现,你说对吧,各位,但是你注意了,同学就这儿啊,咋的unde find.s那不报错才怪,是不?嗯,说老师真的假的,这些东西都拿不到了,同学拿到了,页面刚才得展示啊,很明显拿不到,为什么拿不到?那你就得琢磨一下,同学我们曾经说过一句话,就是这个数组里面你不要瞎写东西,数组里面写的东西必须得是哪有的,死道里有的,死道里没有的东西,你不要去写,你就算写了拿的也是安de范的,那么目前就是死道里边到底有什么呢?
12:47
哎,刚才已经引导大家了,打开这儿,你说我是不是进行了模块化编码啊,咱刚才咋说的死道里边咋的不再是直接的state了,道里面只有俩东西,一个是A,一个是啥,是B,说老师我不信,那就光听你说呀,你说这是HB,这就是HB,我们验证呗,回头看看里面各位做一件事儿,Mon的里面删掉这个,我做一件事就直接把这个人给你看,This点到了符store,哎,我就给你看,让你看看这个store里边的那个state到底长什么模样。来回到这刷新报错是肯定的,我们不关注这报错,来打开这走,你各位往下找找谁state不是我瞎说,你自己看是不是有A里再有school subject some这些东西是吧,然后还有谁呢?有bab里边再有什么person list1堆人是吧,各位,哎,那所以说同学你现在应该知道怎么写了,State里面有什么,我这里边才能直接写什么,State里面没有这些东西,但是它有A。
13:47
但是它有B,后边这些不要了,那你知道上边怎么改了,如果想拿和A点和啊,同学这样啊,这个big sum呢,他是从getters里读出来的,我们刚才说了不能一下子关注很多个问题,我先把这个big sum给它注掉,哎,往下,然后这个东西呢,我也给它注掉,好吧,各位就盯算我没有用那个gets,现在只研究state state研究完了咱再研究那gets OK,好,那你说这儿得怎么写呀,a.school这儿呢,a.subject那这儿呢还是A点啊,不对了,各位得是b.person list点回到这儿刷新一波,你看一切都是那么的完美,学校名,学科这是不是都读出来了?哎,OK,说老师那你要这样写,但我总感觉他有点问题,老师你看这是A,这是B,完,我这还得a.a.a点挺烦呢是吧,哎,回来各位这样啊,咱不叫A不叫B了,咱换点好听的名儿,把这A呀换成这个count about。
14:48
对吧,求和相关的东西啊,那把它复制一份,这叫啥呢?Person相关的东西呗,好,那同理把这东西呢拿过来,这就得改得是count'about.count about点这块也是这块呢,得改成person,好,那回到这儿呢,就得改了,一个是这个,一个是person about好,OK,写完了吧,回头刷新一波,嗯,一切都能出来,你其实就这么写啊同学,没有什么不可以,挺好的是不是啊,但是你还是拿到两个这个东西上边还得点儿点儿点儿特别烦,那能不能这样呢?就是我往出拿东西的时候呀,我就想直接拿到some,直接拿到school,同理直接拿到这个subject,然后呢,我在直接拿到这个东西叫做person Li,能不能直接拿到,完了上边这些地方啊,我就别再点了,就这儿还有这儿给它删掉,同理还有这也给它删掉就能不。
15:48
直接就拿到这些东西呢,是可以的,还说老师那怎么办呢?直接这么写,直接这么写肯定不行啊,State里边没有这个东西是不?那你在这同学不再看了,那肯定还是报错,对不对啊好了,回来,那怎么办呢?啊来各位在这儿啊,这么写,你在这儿啊,写第一个参数啊,第一个参数写什么呢?哎,我写这个看大家能不能看懂啊,Count about啥意思,我要取出这些数据不假。
16:14
但是我想从state里边的哪个属性里面取啊,Count about,你既然叫map state了,你肯定是从state里面取数据,那从state里边的哪个属性取啊,这个属性取,从这个属性里面取什么呢?取这些东西啊,那你要这么写,同学有一个人就不太和谐,谁呢?List,因为我们心知肚明,List不是在这个分类里边的,对不对?各位,所以说临时把这list呀,给它删了去,哎,那说老师上边这,哎呀上边这,同学好写给他来一个问号就得了呗,慢慢来啊,来就一步一步走啊各位说老师这回能不能拿到呢?那你看一下效果呗,回到这儿刷新一波,哎呀,他又报错了,同学不要觉得我每次带你看报错很烦,同学我可以一个错误都不犯,对不对,反正我录视频,我录一个完美的呗,是不啊,一个问题都没有,大家看一下得了呗,但你自己练习的时候,你会出问题的,来读各位他说什么呢,模块的。
17:11
名字空间space是不是有空间的意思,说一个什么名字的空间没有找到,在map state里面谁count about,哎,这啥意思呢?来同学这儿呢,你就别猜了啊,直接告诉大家,因为这个东西啊,不是一个我们能读完了之后马上捕获到信息的这么一个错误,有点绕啊,直接跟大家说,你如果想在map state里面通过第一个参数去指定分类,就是说如果你想这么写,那你得有一个前提,就是你在配置这个view X的时候,你给每一个配置里面都加上一个特殊的配置项,叫做name space啊注意是有D的。spaced什么意思呢?叫命名空间,你把它的值调成true就可以了,如果你不调成true,或者你不写它的默认值就是false,你给这个呀,得写上,说老师写上,那有什么作用呢?你写上这个东西之后,同学来往下滑,你这个count about这个分类名。
18:11
才能够被这个map state这个地方认识,如果在这你不写,各位不写这个东西,纵使你这写了名字啊,纵使这个store里面点state里面也有你这个名字了,但是没有用,为啥说没有用,因为这块不认。啊,也就是说同学,这个东西不是说必须得写,咱得把这话说明白,我不写行不行?行,各位你要不写,那你就得忍住,忍住什么呢?在这也不能这么写,那咋写,像刚才那么写,拿到count about person about,自己上上边点去是不?那你要想方便,那你就这么写,这么写就有前提,你得开启一下命名空间,OK,各位,哎,就是所有的简写啊,它都是有代价的啊,那把这个折叠,那你说这个开不开呢?是不是也得开起来啊,好,回来,回到这儿说,老师,这回他就认识这个东西了,诶,是的,可神奇了呢,这回他就认识了,不信你瞧啊,保存回到这儿刷新一波同学,什么也别说,我问你上硅谷前端是不是出来了?零是不是出来了你想要的三个东西,Some school subject,我问你是不是都出来了?
19:12
对吧,各位,哎,你看看。这个选项是和这个配置相呼应的啊,那同理,各位你知道接下来我想拿到这个persons应该怎么写了,就在这儿,之前咱不是这么写的吗?叫做person list.length对不?那你说怎么拿它啊?说老师简单在这儿补一个不就得了吗?各位一再强调person list不属于这分类,那属于哪分类啊啊,属于person about。所以说各位很简单,在复制一行这改一下这块用了一次map state去读取它里边的,那这块呢,我就不能再用一次了吗?当然可以啊,那我用的时候里面传什么呀,当然就是这个了,List不就得了吗?回到这一刷新各位,那总人数不就一了吗?这不就搞定了是吧?各位啊,说老师那这回就行了,OK了啊,那接下来呢,这个加啥的就都好用了呗,没有同学你点一下加。
20:07
哎,你看这个错误我可带着你看过啊,什么意思呢?一个不知道的mutation类型加,那也就意味着你肯定写了这段代码commit commit了一个什么呢?加,但是这个家咋的不存在,所以说他报了这个错误,哎,那你可能啊,还挺委屈的,哎呀,老师有啊,那你看看这不这儿呢吗?打开这个mutations,这不呢吗?加各位你没说明白,你如果只写这段代码commit小写了commit,然后呢,你写了一个这个加同学,你这么说是不对的,因为你commit了之后,人家是不是得去找mutations里的家呀?那问题是这儿有一个mutations,那这儿呢,哥们儿,你别忘了,是不是也有一个mutations啊,你得说明白它是哪个mutations呀。啊,所以说同学不怪人家报这个错误,你没把话说明白是不?哎,那怎么办呀,你就找到那个代码呗,找到count同学,刚才我点了什么,是不是点了这个increment加,那就找到这个加就得了呗,往下看,找找那加去,同学计算属性我就折叠起来了啊找那加去,加在哪呢?
21:13
哎呀,说老师是呢,加在哪?同学忘了吗?我那个increment是不是靠这个东西生成的呀?啊,那也就意味着各位,你这个红色的代码,这个配置一写,人家就帮你生成了绿色的这个代码真的帮你生成了一个方法叫做increment a小写的对吧?嗯,然后里边的内容呢,走给你写着,就写了这么一句话呗,换成橙色的走叫做commit,然后直接写了大写的家对吧?后边呢,那肯定是写的你那个具体操作的值呗,是吧?在这儿呢,我就写几个问号,我就不说了,同学,那你说是不是红色的配置得翻译成绿色框里的这个代码,那你直接写这个commit加肯定是不好使的是吧?啊,那你得说明白到底是哪个mutations里的加,同学这儿跟刚才是一个套路,加个引号,告诉人家明白,这个加mutation,这个简mutation,其实联系的都是啊,Count about是不是,你看你读东西的时候得说明白是谁。
22:13
里的东西,那么你去发这个mutation的时候,不也得说明白吗?是哪个里边的加体会体会,各位,刚才我给你画这么一个图,我说这是一个道,哎,完里边有啥来着,有A完里边还有什么呢?有B完了A里边有state action mutations,也就是说各位,我不管你去拿谁,你必须得说明白谁的state,谁的gets啊,谁的mutations,谁的actions对不对?OK啊,这么写就对了,老师这么写的加和减就行了,是的,来,回到页面看效果,刷新一波啊,我加你看我减,你看I,给它清掉,说老师那这两个,那你猜呗,一点,不知道的action类型加ODD再走,不知道的action类型加A,你知道是怎么回事了啊,加wait啊,不是A来,你说怎么回事,是因为这是你没写对不对?同学,这我就不墨迹了,你这个配置肯定人家帮你生成了一个函数,函数的名字叫做ment o DD里边肯定触发了dispach去系action,所以说在这同学不了直接写是。
23:13
就搞定了呀,诶回到这边刷新一波,同学一切都好使了啊,加没问题,减没问题,基数加没问题,等一等再加也没问题,OK啊,体会体会,其实同学写了一大圈,我写的东西啊,还真没多少,就是在page这个里面咋的啊,我把不同的东西啊进行了一个分类,然后在这儿呢,哎,写了一个models对象,随后呢,我开启了一个命名空间,然后回到这儿,各位前边都能,你看就这个位置,这个位置是不都能传第一个参数了,哎,说的就很明白呗,啊OK,那这就完事了,哎呀,说老师不对,还有一个东西啊,你没写呢,谁呢,就是那个getters啊也是哈,各位来把它解开吧啊,放大十倍,那你说直接这么写行不行呢?来把它解开保存一下,反正你看效果吧,各位,刷新一个不知道的get贝,Sum,为啥呀,没说是谁的get啊,同理啊,把这个东西给它复制,别写person啊,毕竟是跟count相关的,这么写回头一刷新,同学,你看放大十倍那个是不是也正常了?OK,一句话全都是在第。
24:13
一个参数里面指定到底是谁的,这些东西是不好了,那count呀改完了。
我来说两句