00:00
但你别忘了呀,别把这人忘了,同学他等你半天了,还要person这儿呢解开,那这呢注册一下呗,OK,注意了啊,回到页面里面刷新,哎呀,挺好的,人员列表啊出来了,但是同学嗯,没东西列表,嗯,没东西怎么办呀?分析呗,慢慢来,各位啊,回到这儿我们看一下person组件啊,是怎么写的,同学你记不记得,当时我在写这个person组件的时候,我在这个里面没有去用任何一个map什么什么方法,你记不记得,就这个map什么什么在person里面我一次都没用。为啥呢?就是在这儿等着你呢啊,来吧,各位借助map什么什么吧,那好写都会写对吧,传一个第一个参数那不就可以了吗?但是如果要是自己写呢?来吧,写写,首先同学把这个东西给它弄出来,就是countt组件求和为现在先分析一下为啥它没有,那就找到呗,求和是不是在这呢?萨姆,那萨姆从何而来呢?哎呀,计算属性在这呢?那读的是this,点到点state,点萨姆同学你知道哪不对了,State身上来自己再看一遍,State身上没有sum,它只有count about里边的什么呢?Sum,所以说在这儿加个词就解决了,在这儿第二它是不好刷新,看效果OK出来了啊,那接下来呢,同学为什么没有遍历出人员列表啊,很简单,因为state里边同学没有person list是在person about里边的person list复制回到这儿,那改一下对吧,好了回到这边。
01:37
那刷新一波,哎,这一切都正常了,说老师,那我添加一个人呗,那你试试吧,我写一个李四。走。同样的套路,不知道的mutation类型atd person,为啥呀,回来那是因为同学你包装好了一个人挺好的,就是在这一行出现的问题,你commit了这个a person,但是你没说明白你联系的是哪一个mutations里的a person对吗?各位啊,那刚才我们怎么解决的呀?啊,我们是不是前边加了一个参数啊,那有一些同学说老师我明白了,那跟这肯定是一样的呀,来,回到这个里边,我前边再加个参数呗,这来一个逗号呗,我告诉他呗,是person about相关的那个配置里的啊,Mutations的a person这不就得了吗?啊,那你看效果吧,你自己看啊,你觉得这样好像行是吧?刷新一波,嗯,添加一个李四添加啊走。
02:32
同学,多有意思,你看一个不知道的mutation类型person about咋了?同学,人家拿你这person about直接当mutation的名字了,也就是说他不支持这种写法,那怎么办呀?同学,咱也别猜了,如果能猜出来,那你猜一猜,对你理解有帮助,那既然猜不出来,同学你也想不到这,那我就直接告诉你了,不卖关子了。同学,在这儿加一个person about杠,At person说老师为啥没有为啥?这就是人家的API设计,人家底层拿到这个东西之后呢,去找有没有这个杠,如果有这个杠前边作为分类名,后边是真正的名,就这么个意思,来,不信那你就瞧着刷新一波,我写一个李四,点击添加,诶,你说气人不?他就能添加进去呀,是吧?OK啊,说老师啊,这会挺特殊啊,还有这么写,说老师完了,你现在这都乱了,你这啥情况啊,你这会儿好像传第一个参数,这又不传,同学,你现在只负责听笔记在这儿呢,我早就偷偷的给你整理好了,OK。
03:32
啊,也就是说同学你说自己写好像真挺麻烦,state.person about state.count about完了commit提交的时候呢,找那个mutation的时候还得这么写,是不是觉得挺麻烦的,那你这么一对比,同学你觉不觉得这个简写方式它还真挺香的是不?嗯,但是呢,同学我不满足,因为现在啊,你练的东西少,为啥说少呢?同学回到count里面,Count里面啊,你练的是真全,你看看啊,你是不是读取了state里的数据,并且是来自于不同state里的数据,你是不是都读取出来了,而且呢,你还读取了这个gets,并且呢,还指名道姓的从某一个分类里面读取出来这个gets big是不是?呃,你还练习到了什么呢?练习到了使用dispach去联系mutations,当然你自己没有写那个,哎,不是dispach啊,应该是commit啊,同学看图说话,来看一眼这个图啊,找到原理图,找到这个。
04:29
是跟mutations对话,Pach是跟对话啊,来回到我的count组件里面,我到了,读state,读取S也练习到了,联系mutation也练习到了,联系action是不是都练到了呀?也就是说同学state mutations actions我全到了。但是在这。你有的东西没练到,读取state你确实练到了啊,利用commit去联系mutation你的确练到了,但是还有啥你没练到,哎,从gets里面怎么读取数据,你不是没有练到,还有就是如何利用这个dispach去联系这个action,你是不是没有练到啊,你接下来呢就得写写了啊,但是目前来说啊,就我的这个person配置各位啊,你打开它没有action,他也没有gets,那你就练不了啊。
05:19
嗯,那咋办?写点呗,来同学在这儿啊,写一个action,写个什么呢?我是这么设计的啊各位我在这儿啊,你不能这么写,说老师我写一个家啊,或者老师我写个a person,同学你不能这么写,因为你这么写就失去了它的意义,同学我问你action里边期望着你写啥,你写点业务逻辑,或者说你发送一个adjust请求,对不对,那你在这直接写个at person完里边呢,啥也不干,上来就commit,那其实你这个action写的就没有意义,你就是为了写它而写的,对不对啊,那我写这么一个东西啊,各位慢点来,爱的person王啥意思呢?就是添加的只能是姓王的人,你比如说李四啊,就添加不进去,必须得姓王,OK,走,那这能拿到什么?大家还记得吗?爱里边拿到哎,上下文对不对,还能拿到什么呢?就是你传递过来的那个人是吧?那你不就得写一个判断吗?啊,如果咋的啊,这value你心知肚明啊,这value其实是那个person对象value.name.index of是不是包含着什么什么呀?
06:19
是否包含着王,而且有要求位置必须得是第零个,它才叫姓王,如果符合这个条件,各位,OK,义不容辞啊,Test点咋写com?哎,联系联系谁去?当然联系正常添加这个呗,是吧?各位,那添加的是谁呀?当然是你传过来的这个呗,OK,这不就写完了吗?同学,有没有action,有,有没有业务逻辑?哎,有,好,那gets,这写个啥呢?啊,我写这么一个东西叫做first person name啥意思?列表当中第一个人的名字,哎,那这儿呢,我是不是可以拿到一个state呀?哎,同学,你注意啊,我所有的代码都是在person这个配置项里面写的,所以说我拿到的这个state可不是说那个总的state,而是他自己的这个state,这块儿你可一定要整明白啊各位啊,你就比如说上边这儿来,我给你打开求和相关的这个同学,我就问你啊,这gets在这儿,你是不是直接点。
07:20
萨,你咋没这写呢?State点儿count about点,萨你咋没这写呢?因为你在这儿拿到了这个state,不是总的state,只是他自己局部的这个state,那你说state里面有没有萨,有那就返回吗?是不?那折叠起来,你知道我这块应该怎么写了?各位来吧,咋写呢?诶,不是这啊,是gets是这儿,那你说怎么办呀?Return返回什么呢?State点同学能点啥往这看,这里有啥就点啥呗,点person list里边的第一个人索引值为零,所以说它的name是不是就返回了?同学,那我问你,你说这回啊,我的这个person相关的配置里面有没有action,有,有没有get特斯,有好了,那回来你知道怎么写了呀,各位,我想在这儿呢,再写1H3,哎,叫做列表中第一个人的名字是嗯,然后直接就这么写first person name,那你说这东西是不是得算出来,那怎么算呢?自己亲自写计算属性,OKSO里边怎么写呀,Written this点同学这Dollar for store点同学能从state里面取东西吗?
08:32
不要这样做啊,因为我们知道各位,你这个东西是写在gets里的,别忘了最原始的写法啊,是不是得点gets啊,然后点谁呢?啊,大家说老师我明白了,那肯定是这么写的呀,This点到点gets里边的person about分类里边的谁呢?First person name,老师肯定是这么写的。那你看看效果吧,啊,回来刷新报错不能够读取first person name在and find身上就证明点first name啊,点的左侧出问题了,也就是说这个person about你拿不到。
09:10
说老师为啥呢?我都找到那个Dollar store了呀,那你看老师啊,这个state里边有分类,你看有这个person about count about,完了里边才是具体的数据。老师,那肯定这个gets也是这样分类的呀,Gets里边有person about,完了有count about,那难道不是这么分类的吗?嗯,它还真不是,老师怎么证明啊,很简单,刷新不用管这个报错,我们直接找到这个最庞大的star,同学找到state,我问你里边有没有分类,有counter about是一个对象的key value是里边真正的数据,那同理,这个person about也是一个key,里边是真正的数据,对不好,也就是说state里边啊,是这么分类的。里边count about person about又是一个对象,对不对,嗯,往上滑。你看看gets里面是怎么分类的啊,打开。
10:01
同学,让你大开眼界了吧?嗯,Gets里边的分类和这个state里的分类有所不同,Gets里面是用这种形式写了一个超级长的K,告诉你是count about里边的贝萨是几零,然后告诉你person about,下划线算出来的,不是下划线啊,斜杠算出来的first person name,张三。所以说你像你刚才那么取肯定是错的呀,也就是说同学我问你get斯这个对象里面有person about这个属性吗?没有,有的是这两个属性,Count about斜person斜对不?所以说在这你得把这个拿出来回到这,然后咋的,你是不是才可以这么写呀?但你这么写不行啊,为啥呀?因为读取对象里的属性的时候,如果你想用这个点语法,那就意味着你这里边不能有这斜线,哎,说老师那咋办呢?那就别用这个点语法了呗,就看你GS基本功够不够了,同学我就问一句,读取对象里的一个属性必须得用点啊,没点就活不下去了,不是方括号写字符串嘛,对吧?各位你看person about里边的first person name来回到这看,刷新一波同学来了,张三啊,那你添加一个李四,那走呗,就是李四是吧,哥位,哎,这时候可能有些同学有疑问呢,说老师不对呀,那你这儿我怎么感觉写的就是好像哪块不太对,那我刚才怎么实现来着,刚才没这么写呀,哥们儿说一句,刚才啊,你接住他了。
11:36
诶,这个东西为了迎合这种写法,人家的封装啊,和这个写法是一样的,所以说同学就简单记,如果你用这种简写方式,Map什么什么一点也不用你操心,你就直接把第一个参数的分类名一写就完事儿,但是如果说你自己亲手写,麻烦着呢,是吧?各位,OK gets是不是练到了?还有一个你没练到,各位action,再来个按钮添加一个姓王的人,哎,来吧各位,这怎么写呀,爱的王就得了,来复制往下找,找到哪呢?找到这儿来一个爱的王是吧?同样是把一个人呢,包装成一个对象,但是在这儿啊,就得换一下了,各位你告诉我得咋写this.dollar for,到点你要联系谁?
12:19
是有业务逻辑的,你得联系action commit是联系mut才是联系action,好在这儿写着啊,那联系谁呀?说老师我看看名呗,那你这配的名是啊,在这儿呢是吧,这个这个爱这呢爱的person王老师,那我拿过来呗,完了往这儿一写呗,就爱的person王了呗,完了我添加的就是这个人呗,然后还是把他的名字清空呗,那你这么写就错了呗,为啥呢?你自己看呗,来到这儿刷新一波啊各位,来,比如说我输入一个李四啊,添加一个姓王的人,同学不知道的类型,你知道怎么回事了,前边也得加上这玩意儿,对吧?各位,哎呀,好了,来这回看一下效果啊,刷新一波,我输入一个李四啊,那在这添加一个姓王的人,同学说没添加进去,但这不太好啊,就直接就没了,我们在这呢,给来一个提示啊,在这个位置给他写一个else啊,然后给他alert呢,给它弹窗一下啊,叫做添加的人必须姓王,OK,来一个感叹号,这回呢再看一下效果刷新一波,我写一。
13:20
李四,哎,添加一个姓王的人,同学你看必须姓王啊,那如果我写这么一个东西呢,叫做二王是吧?哎,添加一个姓王的人,因为我说是姓王的人打头的必须得是王,咱不是index of0吗?所以说在这儿呢,同学你写一个王二,哎,他就可以了,添加一个姓王的人,这不就行了吗?OK,同学,你看看纯生自己手写,我们把state gets啊,还有commit dispach是不是都练到了啊?然后借助这个简写方式,State gets mutations actionations是不是也到了呀?对吧?各位,OK,那你看看同学,这不就是模块化编码吗?加上什么呢?同学,加上这个东西叫做命名空间。哎,模块化编码配合命名空间,可能有些东西说老师我觉得你这么写吧,你是你写下去了啊,这些东西我也听懂了,但是我觉得你就是在绕我这东西,我觉得你拆的没有意义,各位我跟你讲这个意义可老大了,咱就这么说吧,在这儿看最直观,同学我问一下啊,你说如果count about里面,哎有一个东西啊,叫做user,有这么一个属性,完了这个person about里面各位也有一个属性叫做user,我问你他俩冲突吗?一点不冲突对吧?各位,所以说你看能解决命名冲突这个问题,还有就是同学你非得把这俩玩意写在这里呀,你能不能这写来右键新建一个con.gs再给他建立一个叫做person.GS然后你知道我要干什么了,各位把这个东西拿走,然后呢,放在count里边,然后把这一些东西都折叠回到这个里面,再把这堆配置拿走,放在person里面,再一放,然后把这一堆呢再一折叠,这两个里面分别都暴露这个东西,Aport写成一个default暴露。
14:58
Count options啊,当然你可以写的再精简一点,Port直接跟上一个对象是不是就行了,看你模块化过不过关啊,回到这边,各位你知道怎么写了,这一堆东西都不要了,直接写aport,然后来一个default,是不是就暴露完了?OK,同学,那你说以后想写求和相关逻辑的人是不是可以在这里写,那人员管理呢,是不是在这里写?所以说同学,人家为什么把store设计成一个文件夹呀,让你分门别类的去写配置,OK,那在这里面你就得给力一点,你就得引入啊,对吧,引入什么什么from当前目录下的count,那它的名字当然叫做count option,那再来一个,那这块当然叫做person option,那在这呢,就是当前目录下的哪呢,这个person这不就结了吗?这些东西一删多精简呢,回头刷新一波也是没问题的是吧,各位哎,想想这就是模块化编码加上命名空间,但是还有个东西诶,我们还是没有练到什么呢,就是我们这个图里边一直说呀,有这么一条线,这里边其他的线我们都走过了,说呀让这action啊联系一下这个后端的。
15:58
DPI啊,得发个请求,但是我们从来没发过,那接下来呢,哎,就给他发一个好了,各位回到这个person里面,我最后呢,再改造一下在这个person里边的这个位置啊,我再给他添加一个actionence啊,叫做这个名字啊,各位你看好了,叫做I的,I的什么呢?不说这个person王了啊,叫做person server啥意思呢?就是联系服务器给我一个人的名字,我去找服务器要一个名字啊,在这儿呢写一逗号,那你说这怎么写,是不是也得写contest啊,那同学你说我还用收到value吗?不用了,我去找服务器要这个人的名字吗?对吧,各位,我收一个是不是就可以了啊好,那这里边怎么写呀,这不得用发个请求啊,那发一个呗,走着import引入谁呢?From as引入了吧,走as点啥get,发一个get请求说,老师,我看看你联系谁,你联系哪台服务器,我看哪台服务器能理你,哎,我找了一台服务器,他能理我。
16:58
在这呢啊,把这个地址啊给他复制一份,同学说一下啊,这是一个免费的API,你每一次访问的时候啊,他都能给你一个小语录啊来我们看一下回车,比如说他现在给你的是啊什么都是什么什么啊,什么伊利优酸乳是吧?啊然后在这儿呢,你再刷新一次,诶是吧,还会再给你一些这个小语句啊有的确实说的挺肉麻的是吧?哎,咱不看这个,直接把它复制过来,不看里边的内容,直接拿回来,在这儿呢发请求,你说里边怎么办呢?点任呗,是吧,然后给他指定一个什么呢?这个成功和失败的回调呗,啊如果成功了,你说怎么办呀,那就继续往下走呗,contest.commit是吧,直接联系那个mutation,那mutation在这是不是person啊,当然我这人的名字就有点特殊了,是不,这儿,那这人什么名字,这人啊,这名字是吧,这人这名字好了,回到这儿,那来吧,那接下来这是怎么办呀,你得包装成一个人的对象对不对啊好了,走人是不是有ID啊,嗯,ID怎么生成啊,那ID吧啊那你在这呢,是不是可以引入一下呀?哎,那在这你看自动它就引入了是吧?啊那更好了,来。
17:58
在这走着逗号人是有名字啊,那名字什么呢?名字当然就是response.data那如果出错了怎么办呀,那就alert一下呗,Alert什么呢?就真正错误的原因呗,Mes是不是可以?哎,你看你请求成了,我就把请求回来的那一堆文字就作为人名,哎,我咔就往下走了是不?各位哎,好了,那接下来呢,这个东西是不是得用啊,回到我的person组件里面,同学再给他来一个按钮,走哎,叫做添加一个人名字随机啊,那在这来一个爱的,爱的什么呢?爱的person吧,哎,爱的person,然后再来一个什么呢?Serve,对吧,来自于服务器那边的这个人啊,然后呢,找到这个MYS里面,再给他配置一个是不走里边怎么写啊各位啊,直接this点到点走thispach就得了,不用带着数据了,不用带着数据是不用带着数据,但是你这个是不是得写person about里边的来找到这。
18:58
谁呢?爱的person server是不是这个东西啊,数据你可以不带了啊,你带也没有用,同学人这呢,咋的人也不收了是吧,直接就是一个cont好了,那这回呢,我们看一下大概的效果,这回不就练到网络请求了吗?刷新一波咱试试啊嗯,那在这儿呢,我就不输入人名了,输入也白输入啊,添加一个人名字随机走啊,说有问题啊,I person is not DeFine,那看一下呗,各位回到这,那应该是在这儿写的有问题对吧?Commit的时候同学不能直接写这个是吧?哎,一个低级错误哈,得写一个磁符串,诶,OK,这回就好了,诶,刷新一波啊,这回再试试走添加一个人是吧,随机的,诶等一会儿你再添加一个对吧?哎,这是随便生成的这么一个东西,OK,同学,那这呢,我们就说完了,这个模块化编码和命名空间也带有了一个网络请求,对不?各位好了,希望大家呢多加练习,那么view X相关的东西呢,就到这最后总结一波各位笔记给你写好了,模块化加命名空间目的是让代码更好维护,让多种数据分类明确啊,然后呢,修改点JS,改这么一个配置,这么一个配置。
19:58
配置进去,然后再往下呢,开启命名空间后,直接读state的数据,这么读,借助map state这么写,开启命名空间后读取gets中的数据,哎,你这么读啊,借助maps,你这么写,后边的当然就是开启命名空间后如何调dispatch,如何调commit,同学,你看看我把简写的方式,这种map什么什么的练了一遍,在哪练的,在这个里边练的全都是map啊,纯自己写,都在这练了,就是person里面,而且我还实现了组件之间互通数据,对吧?各位啊,OK,好了,那这一小节呢,我们听。
我来说两句