00:00
好嘞,各位,那在这一小节呢,我们来实现一下多组件共享数据,目前啊,我只有一个组件,诶,就是计数的这个count组件,稍后呢,在这个位置我会再写一个组件,组件的名字呢,叫做person,这里边呢会展示一些人员的信息啊,我会把这些数据呢交给view X啊进行保管,首先就是求和的那个和sum,其实这块我们已经办到了,对吧?各位已经存进去了,我还会把另外一个数据存进去,就是person那个组件要展示的那一堆人存进去,比如说呢,叫做persons,然后呢,我做这么一个事儿,在count组件里面把这个sum读出来展示一下,其实这条线我们也实现了,对吧?各位你看这不都展示了吗?啊,然后还有另外一条线,就是在person这个组件里面,也把这个读出来做一个展示啊,同理在count组件里面,我也会把这个PERSONS1堆人读出来做一个展示,然后在这个person组件里面也读出来这一堆人,也就是说。
01:00
真正实现什么呢?一个数据好几个组件都在用共享嘛,对吧?好了,来开始学习啊,回到代码里,那么第一件事呢,我就是创建一个person这个组件,点二里边固定的结构呢,咱给它写好走,然后给它配置一个名字name person,好,然后结构呢,简单写写啊各位,我不单单展示一个列表啊,咱们再多一个功能,就是能添加一个人啊,首先在上边呢,我写一个input框啊,给它来一个place holder提示,就是请输入名字啊,然后在下边呢,再给它来一个按钮,哎,叫做添加就可以了,下边呢,我写一个ul Li的列表啊,来里边随便写点东西,因为我目前还不知道数据是什么名字,怎么处理呢?先写好这个静态页面,OK啊,样式呢我也不用OK,这就写完了啊,然后在这儿呢,来一个标题吧,啊,因为我的countt组件不是有标题吗?当前求和为,那我在这就写这么一个东西吧,啊,写一个he啊,叫做人员列表,OK啊,静态组件呢,写好了,接下来呢。
02:00
到APP里面去引入一下啊,是person,好,第2VIEW you呢,删掉,把这个复制放在这儿,然后呢,还得注册一下对吧?好,然后还得用一下,在这儿呢,写一个person,然后中间呢,我给你做一个HR的分割线啊,让他俩隔开一段来,我们先看一下效果啊回到这儿,诶,人员列表目前呢,已经是两个组件了,接助V的开发者工具呢,瞄一眼啊,Count person对吧?接下来考虑一下吧,各位人员列表这一堆人是不是得保存在view里啊,所以说很自然,各位来到代码当中找到VX的配置这些东西啊,都给它折叠折叠,各位啊,我往哪个里边写东西,当然是state里边再补一个数据来,逗号叫做你叫list也行啊,但这呢就不明确什么列表啊啊,你可以这么写,Person list或者叫做persons都行,我在这儿呢,就叫做person list对吧,列表好了,里边呢,写一个人啊,你一个不写的那个列表初始化不出来,对不对啊,随便写一个,比如说ID呢,是001啊,给他一个名字,我就不再写别的信息了,各位或者你再写点什么年。
03:00
性别也行是吧?啊,在这写一个叫做张三,OK,写完了,嗯,初始化的数据是不是配置好了呀?那接下来呢,读出来展示吗?啊,那怎么读呢?回到这个组件里,他要读是不是?嗯,那怎么读啊,各位啊,可以最笨的办法去读啊,那怎么写呢?来在这儿直接写一个comped同学我就直接来了,我就不在这墨迹了,我说同学是不是得在这给这个删掉的用for遍历同学们写一下吧,来写一个最基本的啊p in in哪啊,Dollar符到点state点,然后是person list,对不啊,变利了里边的这个东西呢,当然就是P,然后呢,点name,一变利就必须得有key冒号,来一个key,这怎么写呀?p.ID是不是就得了,也能遍利出来,你看吗?各位啊,张三,控制台开好啊,防止它出现什么问题,OK啊,这么写也行,但是这不麻烦吗?我想直接写person list,那么当然就是复制它,然后自己呢去写一个comput的计算属性,对吧,然后里边呢,写上这个person list,它的值是。
04:00
this.dollar符到点state点,然后是per list,对不?哎,在这就能直接用了,刷新一波可以吧?哎,回来同学,如果我不想自己这么写,是不是可以借助一个方法呀,来,我不删啊,给它注掉,在这儿引入import,从view X身上引入这么一个东西啊,能帮我们写代码,Map state对不对?那这怎么写啊,点点点map state走,里边传一个对象也行,数组也行,对吧?那目前我这儿用的person list和这里边存的是一致的,那所以说各位可以传一数组对吧?哎,就纵使它是一个个位,你也得写数组,你不能这么写啊,你不能直接写这个,这是不可以的啊,回头看一下效果,它会报错的是不啊,只能是一个数组或者是一个object。好了,回来写成一个数组,OK,刷新一波是不是可以啊,啊说老师那这么写就挺好的呗,你这就删了呗,各位你听我说啊,是这样,如果我在person这个组件里面,我直接用这种简写方式啊,我就很巧妙的把一个后期的问题啊就给你回避了,但。
05:00
这我不想回避这个问题,所以说同学count组件里面就在这里面,所有的东西我都用那个map什么什么什么去帮我生成啊,来我精简一下这个里边的代码啊,各位要不太多了呢,大家该乱了啊,我把这个删掉,就是大家现在已经知道了,有两种写法嘛,一个是对象,一个是数组嘛啊而且我建议大家啊,就是如果你听到这儿了,你自己还没有着手去写一写,练一练,说老师我就听到这儿了,这比X啊,我一点都没练呢,我给你个建议,这小节啊,你先停,你去练完了,然后你再写,OK啊,把这些无关的呢,给它删掉,删掉,就留下最根本的这删掉删掉删掉删掉,只留下这两行,因为我用的就是这两行嘛啊注释在这带着那这些。删掉删掉这些,删掉删掉删掉,一直往下删,诶等会儿啊,别删多了走这些呢给它删掉,这个注释给它留着,这些呢给它删掉,OK啊,那这块呢,给它注掉,咱不删啊,就这么写,这个里面所有的这个包括属性啊,什么gets啊,还有这个mutation往里边取东西,或者是啊调用那些东西,我全都用这个简写方式,Map什么什么,然后在这个person里面,同学我一点简写方式都不用,那就意味着撤回来,我这个不写了,这个我也不引入了,亲自自己写对不对,好走啊,就是两种形式都体现出来啊OK,那现在呢,初始化这个列表吧,没什么问题了,我们把这添加给它做一下,对吧?各位啊,第一步呢,就是肯定得获取用户的输入,所以说呢,我在这拿一个viga model啊,绑定的是内幕,那在这呢就得配置一个data里边写一个name幕,OK就能收集了,咱都不用验证了啊,给这个按钮呢,绑定一个点击事件就叫做ADDDD就可以了,哎,然后给它复制在这儿是不是得配置一个MY呀,OK,叫做ADDDD里边干嘛呀,是不是得把人家输入的。
06:40
名字包装成一个人的对象啊,哎,所以说在这来准备一个person o BJ等于人得有ID对吧?ID靠什么生成啊,各位啊,咱之前说过是不是可以用那个nano ID啊,那在呢,引入一下import,画括号from,然后呢是nano ID,在这呢直接写na就有提示了,Nano id1调用,哎,就是一个唯一的字符串,然后在这呢写上name name的值呢,z4.name都收集好了之后呢,我做一个conso log输出,把它放在这儿来看一下效果啊,刷新一波,输入一个名字,比如说叫做李四,然后点击添加,OK是不是可以啊,最后做一个好一点的事情,就是把这个输入框呢,给它清空回来,那很简单,在这this.name等于空是不是就可以了?嗯,OK,写完了,那接下来呢,你这东西不能一直停留在控制台上啊,得交给view X存进去啊,对吧,各位,也就是说你在组件里面得联系view X,诶那咱就琢磨一下吧,回到view X这个配置里面,你说写什么呢?按照标准的流程应该是组件。
07:40
里面联系action action转给mutation mutation修改了state,对不?各位,但是你看一下啊,我们之前在写这个加和减的时候,琢磨来琢磨去啊,最终不写加和减的action了,因为里边没有业务逻辑,但是基数加和等一等再加,里边有判断,这有定时器,有逻辑,所以说我们写了action,那既然我添加一个人,各位也没有什么判断啊,说当前人数为基数再添加,偶数再添加,哎,或者什么添加的必须得是男士,没有这些限制,那所以说呢,就不用写的那么麻烦,不用非得写这个action,直接找到mutations啊,那在这里面配置一个吧,同学注意啊,用大写的,那就是I的下划线person啊,因为你都是纯大写的了吗?不同单词之间呢,肯定得用这个下划线OKI person,那这怎么写呢?首先我手里面能握住这个state,其次我能得到value,其实我们心知肚明啊,各位,这个value。
08:34
对目前这两个绿色的东西来说,其实就是你加几减几的那个几,对于这个来说,其实就是人的那个对象对吧?哎,所以说在这儿呢,同学你可以选择用这个叫做person obj啊在这呢,你用number也行啊,那在这呢,我就是统一都用这个value OK,把这个输出呢也给它复制一下吧,啊叫做mutations中的这个呀,被调用了,然后接下来怎么办呀,State点你找到谁去,是不是刚才你配置的那个person list呀,然后怎么着点on shift是不是往前放一个人呢?诶是不是他呀,就诶扯回来放在这儿是不是就可以了呀?好了,Mutations折叠起来,那接下来在组件里面各位就别consolo了呀,做一个你真正应该做的事,This点到four star.i同学一定想好联系谁?
09:19
啊,老师,我要联系mutation,那能dispatch吗?不能,那得怎么办呀?是不是commit提交,那么提交的这个名字必须得跟这边的来打开a person对上,所以说直接复制过来啊,那添加的是谁呢?当然是这人呢,把它拿过来放在这儿就可以了,是吧?各位来看一下效果啊,刷新一波,输入一个李四啊,点击添加是不是进来了啊at person被调用了,OK,但现在啊,同学没有实现共享,为什么说呢?看着view X里面保存着这个some啊,还有我刚才的这个东西person list,但是现在是这个情况啊,Some只是他在用,Person list只是他在用,如果只是这种使用,各位,那其实就莫不如把sum直接放在他自己家,莫不如把person list直接放在他自己家是不?接下来得实现共享,来吧各位,第一步我想在这个count组件里面,哎,去读取一下person list,哎,就是view s里面不是有那person list吗?
10:19
他这确实读了,我想让他这也读一下,那怎么办呀?哎呀,很简单,各位回来找到count组件啊,你原来怎么读这个some school subject的,那你现在就怎么读那个person list是吧?在这呢,直接写,说老师呢,这块到底能写啥呢?各位很简单,数组里写的some school subject都应该是state里面有的,你看some school subject,那现在你就是复制一下这个东西,回到count组件里面,在这补一个不就得了吗?Person list,那我想把这个person list呢做一个呈现,那我就写在这儿啊,写在这再来一个同学,我就不写那个ul和Li的列表了啊,你要这样的话,你呈现两个列表啊,我写的好看一点啊,我这么写还是写啊这H3完了,我这么说叫做下方组件的总人数式,诶,然后这儿呢,再写这个差值语法同学,这样的话,你说我都能知道下方的总人数,那我肯定拿到了这个person list,我拿不到,我怎么知道总人数呢,是吧,各位啊,那在这呢,我就直接复制一下。
11:19
在这你知道怎么写了,这个数组的点lengths是不是就行啊,哎,我们看一下效果啊,共享其实已经实现了,你看下方组件总人数是一,当你添加一个李四的时候啊,各位走,你看总人数是二,对吧,各位你再添加一个,比如说王五再来一个添加就是三是不在这儿呢,把这句话呢,给它染成红色的啊,让你看得更明白一点啊,就是红色的那句话的意思就是实现了数据的共享,OK,总人数是三,那同理,我在这儿展示一下上方组件的什么呢?哎,求和为,那回到这儿写写吧,找到这儿先把那结构啊给它写一下,在这儿呢,写一个H3啊,叫做上方组件,咱别说上方下方了啊,写的明白一点,各位这这么写person组件总人数,那这块呢,Count组件的什么呢?求和为啊,那怎么写读呗各位啊,你当时怎么计算这个person list的,那现在怎么就计算那个和。
12:19
诶,这是sum,那读出来的是谁呢?Sum这不就得了吗?各位啊,把这sum的复制直接往这一写,这不就可以了吗?来看一下效果,当然啊,也让它呢有一点样式啊,Color颜色呢,也让它是红色,OK,回到这边呢,刷新一波看啊,上方的这个盒是零啊,当你点击加的时候,同学,诶,慢点啊,你发现下边是不是也跟着变?诶同学你想想1SUM放在了view X当中,这块用没用用了,这用没用用了,也就是说同学只要有组件想用这个sum,那就有两种写法,第一种写法不嫌烦,你亲自写去对吧,亲自去读,如果嫌麻烦,那你就借助map state去映射一下是不是就可以了。同学有没有种感觉,用了ma state啊,你从这个view里面读取数据就如同接收pros一样简单,在这声明一下是不是就可以了呀,哎,OK,来看一下整体这个交互啊,下边这个零呢,是随着上边联动的走走走,你看一直在变。
13:19
啊,然后当你添加这个人的时候,你比如说添加一个李四,点击添加,而诶你看这也变对吧?哎,OK,好了同学,我们就实现了一个数据的共享,这个时候不要急,回到view X的开发者工具里面点击这个时候刷新一波,各位你瞧着,当我再看数据的时候,诶这回就挺热闹的,你看啊,把这折叠起来,State告诉你里边有四个东西,并且第一个这个person list呢,它是一个数组,然后在这呢,有一个gets,同学,你之前不是配置了一个放大十倍后的盒吗?Big sum不在这儿了吗?对吧?诶然后当你点的时候,比如说你点了一个加一啊,然后鼠标呢,点一下这这就有呈现了,目前是一,然后你连点很多次,然后呢,你再添加一下这个李四在走,然后你点到最后一个各位你看都是目前他所停留的这个样子,对不对啊,这state里面你看有这个例四,还有之前你写的那个张三啊,这是什么意思来着,大家还记得吗?Mutation就意思是人家的动作以及数据,动作是什么,添加一个人的数据是什么呀啊人。
14:19
的这么一个对象呗,啊,Playload的参数是一个object,里边有ID和name OK,数据共享完成了啊,这回采用这个共享真正的实至名归,对吧?各位好,那这小节呢,我们听。
我来说两句