00:00
好嘞,各位,原理图呢,分析完了,那么接下来呢,我们就去搭建一下VX的开发环境啊,捋顺一下,接下来呢,我们都要做什么?首先第一步你得NP mi安装这个view X对吧?那么第二步由于它是一个view里的插件,所以说我得view.use然后呢,去使用一下这个view X,这是肯定的。那么第三步呢,你是不是得弄出来一个store啊对吧?各位,而且store得管理着actions mutations,还有state对不对啊,那么第四步同学你别忘了,你得让所有的组件实例对象VC都能看得见谁啊这个store,如果说同学组件看不见store,那就意味着组件根本没有办法跟这些东西打交道,你也甭想去调那个dispach,你也甭想去调那个commit,你说对吧?各位好,慢慢来,先把前两步啊给它实现了,安装viewvox,并且使用它回到代码里面,新开一个终端,走NP mi viewvox。
01:00
在这儿呢,我们暂停一下,细心的同学呢,可能发现了,在2022年的2月7日,VI3呢成为了默认版本,也就是说我们现在去执行NP mi view,那么安装的直接就是VIEW3了。并且VIEW3成为默认版本的同时呢,View叉也进行了更新,升级到了最新的四版本,那也就是说我们现在如果要执行NP mi view这个命令的时候,安装的就是view的四版本。而view叉的四版本呢,是只能在VIEW3中去使用,如果我们非要在一个view u2的项目当中去安装V的最新四版本,就会出现如图所示的报错,在这儿呢,大家不要乱,给大家捋顺一下啊,简单来说就是VIEW2中你只能用VI叉的三版本,那VIEW3中呢,你就只能用V叉的四版本,注意啊,它俩的版本号是差一位的,你要严格遵循这个版本的匹配规则。
02:03
那我们现在用的是V2,那所以就要安装V叉的三版本,那如何安装呢?NP mi指定版本三。安装完了啊,那把这个呢给它关掉,这块呢给它隐藏,接下来呢,去use一下啊,那我就得来到点JS里,对吧?各位你当年是怎么use这个view resource的,那么现在你就怎么去use这个view X来吧,写写走这引入view X啊,然后写上这个import view X from view X,然后这呢跟大家说一下啊,就这个大小写的问题,如果你想写的标准一点,V应该大写,哎,就跟这个view呢是一个道理啊,当然你小写同学也没有什么语法上的错误啊,只不过文档里面人家是大写的,好了,写完了啊,引入之后呢,接下来是不是得是use一下呀,Use谁呢?Viewx,你看跟那个view resource啊都是一样的,好同学停下来不要再写了,我不想写一堆东西啊,然后最后告诉你成了咱用吧,同学边写边分析,写两行我就告诉你他是干嘛的,随后咱就去验证,一点一点就搭建出来了,来各位当年啊,我们引入了view resource,然后当年啊我们use了一下这个。
03:12
Resource,那么最终所引起的效果就是所有的组件实力就那个VC身上啊,都多了一个人,各位还记得是谁不道福HTTP是吧?各位啊,那现在我们就得研究一下这个VX引入了啊,我也use了一下这个VOX,那这两个橙色框里的代码所引起的最终效果是什么呢?是让VC身上又多了点什么东西吗?哎,同学,听我说,你只要use了一下这个VX,那么接下来在你创建VM的时候,你就可以传入一个store配置项了。哎,同学你看我的话啊,我说你use了这个view X,然后你创建VM的时候就可以传入store这个配置项了,那也就意味着如果我不引入,如果我不use,你在这传入store这个配置项的时候,它是不起作用的,哎,试试啊各位,我在这呢,传一个store进去啊,创建VM的时候传一个store,说老师,那你传不了啊,你也没有store啊,那store不得是里边包含着什么actions mutations,老师,要不咱们去定义一个star,完了再写吧,同学,不用那么麻烦来,现在同学我就想让所有的组件实例对象,哎,还有谁呢?这个VM都想让他们身上啊,都有这个store,你说我直接这么写行不行?
04:36
啊,试试说老师道的值,同学值,其实无所谓的,我们又没真正的去把那个流程跑通,我们现在只是说一点一点在搭建,对吧?各位就是说我让所有的VC包括VM身上有一个store store值呢,值比如说900是1000是一,12是不是都行啊,哎,你比如正确我在这写一个store的值,来写一个叫做hello,行吧,各位啊,先这么写着呗,我是不是传入了一个store配置项,但是你可要知道我是没有use的,我也是没有引入的,对吧?各位好,接下来给你验证这么一个事儿,我收到这个VM,哎,随后呢,我给你做一个输出,然后你看看这个VM身上有没有你想要的那个东西,道来看效果啊,保存,回到这边刷新一波VM输出了吧,哎,这是根儿是吧,打开,同学瞪大你的眼睛看这块儿,有什么道吗?
05:27
没有啊,那再往下看,这块也没有是吧,你再往下,同学你顺着原形再找,你怎么找它也是没有的,然后这块也没有Dollar for store是吧,或者是什么store啊啊,就只要见到store这词就算呗,没有,那你再找同学,直到你找到哪啊,直到你找到这个东西,To string都出来了,你找到了object的原型,你也找不见这个store对不?哎,好,回来,那接下来呢,我引入它啊,那接下来呢,我use,哎,还有一个地方我也给你验证一下,同学VM再验证完了,那咱们再验证另外一个人就是组建实力对象对不对?在APP这呢,我写一个mount完在这里边呢,我写一个conslo输出this同学,这是谁的组建实力对象啊,APP的来走,你看看他身上有没有那道是吧,来刷新一波,打开同学没有store是不?哎,往下我就不再看了,不再验证了,自己可以去看一看啊,折叠起来好了,我把这个输出呢给它输掉,接下来回到min.GS里,同学,该引入引入,该使用使用,你这一使用不要紧,诶我跟你讲你传递的这个到。
06:27
诶,人家就认识了,你要是不use的话,同学你在这传什么,人家不认识,其实就给你传一个这个,比如说传一个MSG啊,是哈哈啊,给你在这传了一个呃,School啊叭,如说是艾硅谷是一个道理,你传了这么多东西,但是人家不认,人家把这些配置项直接扔了是吧?各位啊,但是你这么1USE,诶,你这个star啊,人家就认识了,不信你瞧,我把VM给你做一个输出,刷新一波打开,各位,谁出现了?嗯,你瞧吗?Dollar store是不是出现了啊说老师不叫store吗?在这呢,它叫Dollar for store,哎,其实就是为了迎合view的这个设计是吧?各位你看看值是不是你写的,Hello,对吧,别的你不用去关注啊,那些东西该下划线,这些不是我们用的,对吧?同学有没有有OKVM身上有了Dollar for star啊,那这验证完毕了,我们再去验证另外一个地方,就是APP这个组建实例对象身上有没有这个,我们更希望的是组建实力对象身上有这个store,对吧,各位,哎,你有。
07:27
我说store什么dispatch啥的,这些我都握在手里了吗?是不好了,回到这边刷新一波打开,同学你瞧吗?谁来了,到了store啊,那在这呢,我就不再验证了,你可以把这一堆代码呢,给它复制到咱们的这个count里面,对不对?Data折叠,Methods折叠,给它放在这儿你看一下啊,这会儿呢,给它改一下叫做count的,来吧各位刷新一波啊,瞧一下count在这呢,打开有没有Dollar star,有同学,OK,你已经完成了,让所有的组件实力对象和VM都能看到了这个Dollar store OK啊,这一步完成的挺好,嗯,那给这块呢,给它删掉吧,APP这里边呢,先给它注掉,然后这VM这块呢,同学我就整个删掉了,因为一会儿呢我也不用了啊,那接下来呢,嗯,说老师那就写完了呗,写完啥呀,同学,你死道啊,你自己看看是不是一假的呀,同学咱们说那死道咋的,得首先管理这三个人,再其次死道身上得有这两个API,对吧,各位啊,那咋办呢?那你就得去创建一个死道嘛,最最核心的东西。
08:27
对不对?好了,回到代码里,同学你有两种选择,听我说啊,第一种选择就是你在src里面创建一个文件夹,文件夹的名字就叫做VOX,然后里边你又建新建一个store.gs啊,人家一看到这个代码诶就明白了,这兄弟啊,应该是用了view X这个技术啊,并且呢,那个store在这儿创建出来的,你看这就比较明确,对吧?哎,但是官方文档里却不是这么写的,哎,官方文档里啊是这么写的,它这个文件夹呀,叫ST,然后文件里面有一个index.gs哎,就是还可以这么写啊,说老师那推荐哪一种呢,哪一种都行,那在这儿呢,为了标准一点,我就参考官网上的写法,各位文件夹叫style,说老师那你这不对呀,那你这没有体现出来,你用这个VOX呀,同学,但凡有点经验的人啊,但凡你干过view开发,只要见到人家的src里面出现了这么一个东西store,那其实就相当于你看见。
09:27
那谁呀,VOX对不?咱刚才不是说了吗?图中没有体现的是这三个人得经过store的管理嘛,见到了store就如同见到了VOXOK,回到这个里面,同学开始写代码吧,啊,首先我先写上注释啊,就这个文件,我要干嘛?该文件啊,用于创建VIVO X中最为核心的道啊来吧各位呢,创建一个道吧,首先我们得明确死道是不是为了管理这三个人而出现的呀?那所以说第一步,我觉得各位好像应该把这三个人给他准备好对不对,没有这三个人的管理谁去嘛?哎,所以说来吧各位走,首先定义谁呢?Cost这个actions同学,我们之前分析过这个actions本质是一个什么东西,就是一个object的对象,是吧?各位来写,好处是这一步叫做准备谁呀actions啊,Actions的功能是啥呀?咱给他写完整点,各位来。
10:27
看图说话actions用于响应组件里面的动作是吧?各位,哎,回到这儿写上叫做用于响应组件中的动作,哎,动作嘛,I什么OK,这个准备好了,复制一份,还得准备谁呢?这个人muon mutations啊,这干嘛呀,用于干嘛的?看图说话同学,Mutations指也是一个对象,他是干嘛的呀?真正去帮我操作这个数据的对不对?好,回来用于删掉这块叫做加工啊,或者叫做用于这个操作吧,是吧?诶,操作就包含着修改什么的吗?啊,用于操作数据啊,写一个括号,其实就是谁呀,State就是那个状态,那你说接下来还得准备一个人谁呢?就是我们所说的这个s sta state呗,那当然这个名字你得改啊,这块叫做mutations,那当然这块得叫做state。
11:24
啊,那在这给它删掉,同学用于干嘛?State用于干嘛呀?哎,叫做存储数据嘛,是不?各位说老师里边的东西,同学你想那么多干嘛呀,先别写那么多,只是把这个环境给它搭建起来,对不对啊,三个东西都准备好了,而且呢都是对象类型,你看完全符合规矩,那接下来呢,还是没有道啊,哎,说一下各位这个道啊,你得通过一个东西拗出来,就有点像那个VM啊,你是通过拗了这个东西,就是view这个构造函数出来的,对不对啊,那同学同理,这个store啊,你也得NEW1个人啊,那我得用谁呢?来写上这个形式啊cost store,然后呢,等于用用谁呀,你想想你找谁去各位啊,你不可能找这个吧,Object你找他没用啊对不对?哎,找谁呢?找这个view X啊,但是我问你,你引入了吗?没有,那在这写好注释走着叫做引入X啊,走port from X。
12:25
好,引入了吧,那接下来呢,哎,说老师这个是不是就得了呀,哎呀,其实怎么说呢,各位这会儿吧,就很被动了,这块就看人家怎么去设计了,对吧?各位,New的不是view X啊,New的是view X身上的这么一个构造函数点二叫做四道,哎,你没发现它这首字母都是大写的吗?是吧,各位,哎,你得这么写啊,旅顺旅顺好了,写好叫做创建谁呢?S story创建star,那同学啊,你别忘了store的目的是不是管理这些东西啊,所以说当我在创建store的时候,你得传入一个配置对象,哎同学你发现啊,就是view和一些官方出的这个插件库啊,它如出一辙,你比如说我们学的这个VX同学哪个团队出的,团队出的,说白了哪个团队打造的V,哪个团队就是打造的vvox,所以说你看跟我们去创建这个东西的时候,那个VM的时候,是不是像极了new,把它传入一个配置对象好了,不墨迹在这写同学配置对象里面写什么呢?哎,你得传入这三个最为重要的人X。
13:25
Actions,然后写上它的值,那除了这个呢?还有谁呢?当然是mutations,还有谁呢?State,但是这些值同学我已经准备好了,Actions的值就是读取这个,那么mutations就是读取这个,那么state就是读取这个,对吗?各位,哎,那你没发现这块和这块重名了吗?对吧?哎,对象里的key和保存对应值的变量重名了,是不是可以触发对象的简写形式啊?哎,这块你得知道,OK,同学这个star啊,就准备好了,你看这些人呢,也都用上了,嗯,说老师啊,那就写完了,错啊,为什么呀,你这个文件没有向外暴露任何的东西,所以说最后给他补一个aport default,同学不一定非得写这default啊,你要真喜欢分别暴露,统一暴露,你也可以写呀,啊,但是一般来说,同学,我这个文件都是到里的index.ds同学,那你说这个文件想提供什么东西,不就一个store吗?它不可能再提供一个A和B,对不对,哎,只有一个,那一般来说呢,我们就都加上这个default aport default什么呢?
14:25
道写好这一步叫做啥呀?暴露死道,有的人呢,不说暴露啊,他说这个词叫做导出,哎导出就是这个,哎,不是这个啊,是导导演的导啊导演,诶这个出,哎导出把这个store呢交出去,那在这儿呢,我就说暴露了啊,这怎么说都行啊,那同学不觉得这个代码写的有点麻烦吗?先创建啊,整个中转变量完了,在export defat,真麻烦各位来把这个呢给它剪切走,直接放在这是不是完活了?哎,然后在这写叫做创建,然后再来一个词儿,并暴露star把这个呢删掉,同学,这个文件写的就比较完美了是不?你看三个东西都写好了,哎,Star我也创建出来了,也交出去了,嗯,配置像这三个人也管理起来了,OK,那各位,那你说接下来干嘛呀?来,你教教我接下来怎么办,Star准备好了,那你这就别写这假的store了,还写个hello是吧?哎,那怎么办呀,是不是得引入那个store啊,哎,写好处是走引入s store,然后在这呢import s store,然后。
15:25
Sa,当前目录下的store下的谁呢?index.js同学,如果你的文件呢,是index.js啊,这种比较好的名字,脚手架认识的名字,那其实在这儿啊,你就不用再写了,写到这就可以了,哎,说老师那不对,那你这不是属于没写完吗?你引入到这个路径完,你没说你要哪个文件,你没说要哪个默认,那就拿index,那如果没有index呢,那就报错呗,是吧?哎,但是我这有啊啊OK store引入没引入了,接下来是怎么写呀,是不是这么写?那是不是又处罚了对象的简写形式哦,是不是删掉哟,OK同学你看看啊,该use的use完了,该创建的创建完了,该配置的也配置完了,那么不出意外的话,现在VM身上和所有的VC身上应该都能看到那个Dollar福store了,并且这个Dollar store可是一个真真正正实实在在能用的store,不是我们刚才那假的hello了,你说对吧,各位来那看一下效果吧。
16:25
满怀激动的,哎,你就打开了浏览器去看效果,其实同学如果你要参考官方的文档,他也会这么告诉你的,说你得use啊,哎,兄弟你得引入啊,哎,然后兄弟你得写这些配置,他也会告诉你写的啊,然后呢,你也就按照他的这个说法去做了,然后你回到这儿,哎呀,同学完了。出事了,你看组件都不出来了,你读同学啊,说什么呢?给大家放大一点啊,说必须调用view.use view X,然后再往后读before creating a store instance同学翻译成人话啊,开玩笑,翻译成人话的意思就是请你必须调用view.use啊,然后传入这个view X,在创建道实例之前。
17:12
同学听他的意思就是当我创建这个store之前呢,我必须得写了这段代码view.use啊,后边我就不写了,什么什么什么VX,那他之所以能报这个错误,好像是因为我把顺序给搞反了。啊,好像是我创建store的时候还没有去调用这个view.use是这意思不,人家要求你先调这个完了再去创建实例,但是你没这样做,那人家就报错了呗,啊说老师,那我看看代码怎么回事,那你看一下吧,各位啊,来分析啊分析同学,你是不是在第十行引入了,到那就看你对模块化的这个理解怎么样了,各位,我引入一个模块,那你说是不得把这个里边的代码执行完了,我才知道这个绿色的文件给我暴露了什么,我是不是在这儿才能接住,随后是不是才能走粉色框里这些代码,你说呢,各位。
18:09
你引入一个文件,那不运行,不去分析里边那个点GS,它不去执行,那你说我怎么知道你这个文件给我暴露啥了呀?哎,所以说同学第十行这么一写不要紧,咱就可以非常肯定的说,第12行包括在下面代码在执行的时候啊,执行之前。这个store里边的代码已经执行完了,那也就意味着你在这一引入store就来到这里面,这里面这些代码刷一下是不是就执行了啊,那执行的过程当中,同学我问你是不是在创建四道实例啊,那你是不是在这就已经创建完了四道实例,那你回到这个里面,同学我问一下你执行这个了吗?哎,没有呢,那所以说得怎么办呀?啊说老师我明白了,你这一引导我懂了,就这个东西啊,剪切走往下放,老师你看这回一点毛病都没有,我引入view X,我use view X,老师快表扬我随后在这我引入的store,那也就意味着14行好像都执行完了,我再引入的这个store,哎,那store里的代码了啊,那肯定是在这个use之后执行的呗,啊那这个时候呢,你再次满怀欣喜的打开浏览器,你发现错误依旧,哎,这是怎么回事儿啊?
19:20
啊,各位这儿呢,说一下这就是脚手架解析inport语句的这么一个问题了,来注意看啊各位,我把所有的这些文件呀都给你注掉,嗯,舒老师你要干嘛啊,来瞧着我在这里边创建一个文件test1.g,我在给你创建一个test2.gs,哎,TEST1呢,什么也不干,各位我就是输出一个TEST1,同理啊各位,我这个TEST2呢,也什么也不干,就输出TEST2,两个test准备好了,接下来回到mid.js里,我在上方啊开始写代码了,首先呢,我引入这个TEST1,哎,就直接这么写了,说老师你这不对,那引入得是这么写啊,引入啊什么什么东西from什么什么东西,同学,我没有必要非得这样写啊,我这么写的意思就是把那个TEST1啊给它引入一下,参与一下代码的运行,诶在这呢,我给你删掉删掉。
20:21
这么写的意思就是我想在win.gs里面去执行一下T子一,对吧,我没有必要写的那么复杂呀啊,这不就引入T1了吗?啊,如果你要觉得老师实在让我不舒服,那你就这样来,最上边呢,我给你来个lo,然后在这呢,一个啊,A啊或者这么写constant st1完了等于谁呢?这个test,然后最后呢,我给它暴露出去,各位,那我写一个aport,然后再写一个defa s tre,这回行了吧,各位,这我暴露了是不把这一堆复制回到这里面,全选粘过来,二这是二,STR2这是二行吧各位,好了,回到这,那这回能写了,嗯,走着叫什么呢?STR1,哎,然后FROM1,那再来一个STR2 from哪呢?TEST2,然后在这同学最后来一个conslo,多少呢?随便写一个100啊,那同学你说STR1啊,或者说TEST1想引入是不是这些东西得执行,你一执行不要紧,各位是不是输出这个,那同理这个一。
21:21
点入标是不输出这个呀,请问控制台上的输出顺序是什么?我不用输出这个STR1和TR2,我想研究一下文件执行的顺序,请问控制台输出什么吧?各位,应该输出的是你先引入的T1吗?所以说是T1,随后T2,再随后100来看效果啊,保存回到这边,刷新T1TEST2100对吧?各位好,那接下来呢,我调整一下,我把consolo给你放在这儿啊,然后再来一个CONSOLO200啊同学,那你说输出应该是什么呢?理论上好像应该是TEST1100200TEST2对不?各位,嗯,但你看事实呢,刷新神奇不还是TEST1T21拍200这儿呢,说一下各位啊,就是在这个脚手架里面啊,你去写这个import的时候,我不管你这个importt啊,两个importt之间你都写了什么代码?它会扫描整个文件的import语句,然后把所有的import语句按照你编写代码的顺序全都。
22:21
闭总到最上方,也就是说表面你的代码是这么写的,但是最终执行的代码其实是这样的,所以说T1T2100200,所以说TEST1TEST2100200,对吧?各位,哎,这块如果你搞清楚了,那这个问题啊,咱就能聊了来TEST1TEST2都给它删掉,这是做测试的同学把这一堆解开,就不难解释刚才那个问题为什么还出现了,表面上好像,哎呀,我在第14行之后,我是不是引入的这个store啊,哎,好像就是store里边的代码得在它之后才执行,岂不知啊,人家在运行的时候把你这个import是不是上升到这个位置了,那这一上升不要紧,各位你不还是先创建的四道实例,后来use的吗?哎,那说说这问题怎么解决呀?
23:06
对吧,你靠调整这个顺序呢,它已经不奏效了呀,各位啊,那怎么办呀。索性啊,我们就这么做,各位来回来这个use啊,我不在这写了,为它剪切走,因为在这我没法控制了呀,剪切走,老师,那你放哪儿了?嘿,你瞧着我放在这,你是不是在这儿,New的store实力对象我就放在这儿,我看谁敢拦我view.use我先执行的这个是不是在执行的这个对吧?各位啊,说老师那这回就行了,那肯定行啊,但是你别慌啊,你这里边是不是没有view啊,所以说你得在最上方啊,是不得import谁呢?View,哎,然后引入谁呢?View view是不是就就位了,那view.use是不是就能用了呀?哎,那如果说你想写的更好一点的,你可以把这个东西再往前提一提,让它在这儿引入完了view,引入完了X,那就去使用它好了,写好叫做应用viewvox插件,或者不说应用叫做使用是同样的道理,OK,好了,那回到这,各位,那你觉不觉得vvox就不用在这引入了呀?哎,给它删掉,我只需要。
24:12
进入一个人就可以了,谁呀,Stop啊,Store在哪呢?在这儿呢,我自己写的吗?对吧,各位,哎,捋顺捋顺,这回回来一刷新,诶,一切都对了,同学们,我们验证一下啊,首先不验证VM身上那什么样了,之前咱都看过了,是不是也有那个hello在这儿换一下各位,我把这个解开,输出一下APP的组件实力对象,看看他身上有没有那个Dollar福store,再看看这个Dollar福store的值是不是我们能用的那个东西啊回到这儿刷新一波各位输出了APP的VC对吗?打开。你看到了什么呢?Dollar f store同学注意了,这回啊,他可厉害了,可不是你写那什么一百两百哈,那些无聊的值了,打开这个Dollar store同学特别的强大,诶,跳了一下是吧?诶,重新画一下,特别的强大他身上哎呀,这咋的了呢?来,再重新来一下,我一开画笔他可能就跳了,我在旁边看来走特别的强大哈啊,这个激情都整没了啊,特别的强大啊,身上呢,有这么多的API,同学你看到了你最想用的那个人,谁呢?Commit,还有谁呢?Dispach对吧?各位,哎,说老师,别的别的你先别看,一会儿我们再用,现在反正我找到了commit和dispach同学,我是不是可以跟viewvo X进行对话了呀,然后我们再验证一下各位,就是把这个东西复制来到这个count组件里面啊,然后找到这个配置项里面再写一个con的,看看它这里边有没有东西,那我先临时呢把这个给它注掉好了,回来刷新一波,各位,这是count的VC,有没有Dollar for star,有,是不是我们所期待的那个特别强大的star啊?
25:46
当然是OK,同学,开发环境不就搭建完了吗?为什么刚才在这儿呢?我给大家墨叽了一下啊,就是关于import这个问题,因为之前呢,线下讲的时候有同学问过这个问题啊,说老师我有地方不理解,你说为啥这个view resource,你在mean里边引入完了,你可以在这use,那为什么老师你写这个view X的时候,我怎么发现你就直接把东西写在这里了呢?还在这引入view,然后在这还得点朱老师我不理解,你看同样是插件,你非得在这里边用,我觉得在这里边用会更好啊。啊,那是因为之前呢没跟大家提这个问题,这回一提呢,大家就懂了是吧?各位好,那这一小节呢,我们就说完了,搭建好了vvox的开发环境,同学笔记啊,已经给你整理好了,回到这看啊,概念什么的我就不说了,合时使用也不说了,看这搭建环境src下store下的index.js都是我刚才所写的那些代码啊,包括这个mid.js里面引入store直接配置就可以了。
我来说两句