00:00
大家好,我是学学地的特约导师高若峰,上节课我们了解了一下v exx的状态管理,VX呢是一个专门为VIVO应用开发的状态管理的一个模式,说白了就是一个全局的一个date,对吧?咱们单页应用的时候,也就单个组件应用的时候,咱们可以使用date管理,对吧?那么如果是全局的多个组件之间共用的,那我们就用v exx来管理,那什么情况下用咱们说了,你比如说用户的状态啊,多个组件之间共享的对吧?商品的收藏啊,购物车商品,这个时候呢,咱们就得需要用无忧于X来管理这些数据。也就是呃,状态管理就相当于一个超全局变量,是这样的作用,那这节课呢,我们来呃安装和体验一下VVX管理啊,那我们可以在上一个呃M4里边,咱们直接NPM对吧?Install安装vuex杠大S再开发安装,这样是可以的,然后呢,也像路由一样,咱们写个配置文件对吧,然后在vuee里边引用就可以了,但是咱们这脚手架已经帮我们有可选安装了,咱们直接用脚手架安装,用脚手架安装呢,和我们自己写的没什么区别啊,但是呢,它是按脚手架的规范去完成的,所以咱们直接用省事一些,省得咱们自己建文件夹,建in代词文件,对吧,是一样的。
01:09
那我们得退回这个目录,这样的话咱们也好区分一下,区分一下就是每讲一个新知识点的时候,我们都单独的一个项目,所以呢,有这样的一个目的,那么VE创建c re c re创建一个项目,咱们叫DEMO5这个项目。放电的时候,咱们可以在这里边去选择对吧。诶好,这里边我们代三代四,这是咱前面做的,然后呢,我们选择手工的还是选择手工配置,这里边我们可以选择V的版本,对吧?然后呢,可以选择报膜这个,呃,TS你也可以去选择啊,这样的话我们就可以像我们选择csi一样,在SC里边加上呃,LNG等于TS,那么就可以使用TS语法了,TS语法是类似强烈型的微软说的一种加速差不多的,当然了,咱们现在用GS就可以了,所以这个咱也不选,然后呢,咱们可以选择。
02:01
APP知识也不需要路由咱们选择上,咱们学过的,咱们就选择上这个,咱们选择上,那CSS咱们选择上这个,咱不要了,那单元测试这个,到时候你可填验这个都不难,但是呢,咱们现在用不上,那就选择这些,然后回车,回车呢咱们选择三对吧,然后这块呃,历史模式对吧,一车模式咱们说了不有历史模式哈希模式嘛,对吧?嗯,这些模式可以选择吗?然后咱们这个就选择S。选择进入,呃。这个吧,监测文件都在这里边,这无所谓了,就配置文件,单独这些配置文件在哪,是否保存一个对象可以咱们叫DEMO5,下次遇到DEMO5的时候,咱们就是讲个VEX这样的一个一个关系,然后等待创建。我可以快进一下啊。好,我们安装完了,安装完了之后我们来看一下,这里边就会多了一个DEMO5对吧?那我们就得到这个DEMO5的这个文件夹CD,这里边告诉我们进入,然后运行对不对,DEMO5这个文件夹,那我们看一下DEMO5的文件夹里边跟我们安装的是一样的区别,这里跟我们前面安装都是一样啊,这里边放所有的第三方的一个模块对吧?哈,布雷这里边有个嗯,图标和我们的首页S阿西里边呢,有,你看嗯,放资源的对吧?放组件的里边默认有个哈,Word的一个组件嘛,然后这个是放路由的,这前面我们讲过的,你看这有个SQ re存储放存储的对不对?当这文件站我都可以改,那它脚手架默认建那个比较好的话,那我就建这个,那状态管理呢,我们就叫这个存储嘛,对吧,超全局变量嘛,我们用这个仓库类似于这样,这里边是它的配置文件啊,我们先不打开看,然后这里边呢,是我们页面级的组件,关于我们home对吧,然后这是主程序,然后呢,在这个里边是告诉我们安装的有这么多,你看无U安装了这个版本,然后呃路由对吧,无UEX装的也是四和这个路由的版本。
03:46
它是一致的,是一致的下边呢,是开发的时候用的啊,像脚手架啊SAS啊,对吧,这开发时用的,那上线之后运行时候对吧,用的我们是这个,你可以看好这个版本在这里边呢。好,那我们可以运行一下,你比如说使用呃NPM啊,有,但是一定记住咱们建了这么多项目,一定在你的项目的对应的文件夹里边去使用serve VE啊,运行我们就放一边,然后我们打开这个啊。
04:12
有览器,然后在这块它运行起来,我们就可以输入 lockho8080啊,这个项目现在是可以运行,那和我们内装这个状态管理感觉是差不多,对不对,我们先不了解那个,我们先看一下,如果我们自己做的单页也就在一个组件上,如果用状态管理怎么做,你看状态管理也就相当于我们date里边,对吧,写入了一个数据,来,我一点点给大家说这个图。你比如说我们在这里边儿的APP里边,你就在这里吧,这里边儿它下边不有一个。嗯嗯,Home就是转向这个跟下边转向home对不对,那我们到这里边home组件里边,在这里边写就行,对吧,在home里边其他的,嗯,就比现有的这个要把vuee这个去掉,然后。这个组件有哈,组件咱们先留在这块,就全用它默认的啊,这个是它的一个别名路径找组件下边这个啊,这没关系,跟我们前面讲的差不多,你比如说我们在这个里边。
05:07
当然这块它传递了一个消息,嗯,我们这块先先不管它,这个我们先不管,你看如果我们在这里边声明一个date BAT这个呢,就相当于我们状态,这单页的状态对不对,返回去一个对线,这是单页的一个状态。这是我们前面经常做的,比如说我这里边写个呃,CON1个数,比如说零。数零这里边保存一下。他这块你看。怎么提示我一个错误?这块一定别忘了我们date什么,我们date一定得是一个方法,然后里边才能return对吧,再保存一下,你看这个就没没有错误了,对吧?然后呢,在date里边我们这个数数量,那date的这里边声明的状态就相当于变量嘛,对吧,就说音状态,我现在说的是单一,现在跟V还没关系,咱们一点点对比一下去应用啊,那这个状态是不是得在视图里边去应用啊,对吧,微流应用,那微流是不是就是模板视图是不是就是在上边这么去应用,对吧,这么去应用,那我这块嗯,随便写上一句话。
06:07
用H2吧,这写上这是在呃单页模板。模板中应用在单模板应用,然后我这里边再用一个HR,然后我用差值方式写上啊cut,这样的话我们就相当于把我们这个数据在这块。你看这是在单一模板中用,是不是就在这了,放到这了,这个数据零对吧,也就是完成了我们图的这一部分,第一部分生命状态在data里边,然后呢,在这应用,那再回到这,这个呢是action,也就是用户的一个操作动作,对吧?在视图上面可以有动作,比如说我们用这个数加加减减。让这个数加加减点,那我们就在下边做,呃,两个按钮,BOT。然后一个减,然后呢,我们再来一个加,让这数加点点,那这样的话,我们写动作的时候,我们就可以这块加一个click。
07:00
点击的时候,我们要那个什么CT加加是不是就可以了,这个是减减啊,那我们就减减,然后我们这块再来一个。CSK等于con加加,你看我现在写的这过程就是模拟这个图,现在我写的加加减减那个事件是不是action对吧?在这块,所以呢,我这块操作的时候,是不是在操作管理这个状态,状态变了,是不是视图上应用就变了,形成这样的一个闭环对吧,你看。我们加加数量再加减减数量再减对吧,加加减减。对吧,都可以,那如果我们这个单页,如果你很简单的就两个页面直接应用,比如说这里边儿又加了一个什么,呃,Hello word对吧,又有hello word组件,那我们这里边这些东西都不需要。就是单页的hello word对吧,那在hello word里边,现在不去,我再打开这里边的组件里边,这属于它的子组件吧,这是默认给我们提供对不对,那这个我就不需要了,这些这里边都不需要了。这边都去掉,都去掉,然后。
08:02
嗯,这里边我们再也来一个H3吧,嗯,在子组件,在子组件h hi hello w,嗯,Hard word中应用什么应用?Home中的DA it在这里边应用,那在这里应用呢?我们需要通过属性传过来,那这个就不是字符串了,那我们需要传一个Co cont,你看这两个组件之间传状态在这。卡掉了两个组件传状态,那传一个属性过来,那我们传的是数字类型um传个数字类型的过来,那我们就必须在后面组件这块在使用hello的时候,我们传一个什么,呃,传一个变量,变量是不得绑定cont这个属性,那属性值呢,Cont这样的话,我们就把cont是不是就能传到hello沃里边这两个组件之间传递,那我在这里边使用的时候也用差值的时候,就不是本页面date,而是副组件通过什么通过。呃,T传过来的,所以这里边写。
09:01
传过来的一个事件,你看在子组件里边传递,你看这里边现在也是想阳市的,为什么沈阳市能够父组件有变化,你看在这里边有变化。这里边有变化是绑定这个变量,那这个变量变化是不是传过来就会变化,传过来变化在子组件直接变化吗?你看现在在单页模板中使用对不对,在子组件使用,所以呢,两个页面之间传递,你可以使用对吧?父子组件不用状态管理,咱们一样可以实现我们想要的一个效果,对吧?但是呢,如果我现在还想在你看这里边韩国人不是有个about关于嘛,对吧,那这里边如果我想用。你想想想用这个技术我怎么用,你点击关于的时候,对吧,然后把这数据清楚了,相应的数据是不是就保存了,那多属于什么,通过路由感觉像是相当于跳转一样,对不对,当然我们也能做到对不对,你再往后极传呗,对吧,传在APP,然后再传过去也是也是可以的,但是呢,就比较麻烦了,所以这个时候我们就需要用什么,用状态管理,那这回我们来看一下状态管理是怎么一个回事。啊。刚才是单页,咱们现在把data里边就管表示成是一个状态,对不对,你看他现在的状态管理呢,给我们安装完之后,对吧,这软在里边,这是目录键的配置文件,这是index的这个文件,Index文件,那我们需要有这个index文件,我们首先要做的就需要在哪块,在我们的呃主方法里边是不是我们的引用,你看引用了这个目录,找到了这个目录下边的这状态,是不是相当于就找到了这个目录下对吧?这个目录下你叫inex名,所以就不用起inex,自动帮我们找到这个index的,然后呢,这只是引入,引入的时候我们得在vouee里使用,所以呢,创建appvuee,你看使用状态和我们使用路由是一样的,所以你自己用n PM in install安装的这个状态管理一样,然后起个目录名,然后引入,那目录名是不是就可以变化可以改呀,对吧,引入,然后这样我们就可以使用了,那我们现在就把状态生明在这里边就可以了。
10:51
你看这里边儿啊,这个是路由规则,不是在这里边。点错了,在这个里面状态index里边,你看这里边儿有这么几个方法共建的,当然都是可选的,这些你都可以删掉啊,这些你都可以删掉,对吧,有这一个就可以了。
11:04
留这一个就可以了,然后你看我们创建这个,通过VX里边。这块引入v exx,我们引用VX里边的是创建stop,对吧,那在V2里边呢,是使用VE点这个,然后呃,Stop这么去做的,那在咱们的VE3里边呢,它直接给我们有一个这样的一个方法,所以我把这个方法暴露出去创建,创建完之后就相当于我们创建了一个状态管理里边呢是option配置选项,这个option都说了多次了,配置选项,那配置选项的时候呢,我们就有什么状态,对吧?有这个,有action,有这个,这几个都是咱们后边去管理的,都是来管理这个状态的,现在咱们把这状态写在这个里边就OK了,对吧?那这里边我们就是它里边你看就是一个计分格式啊,那我们这里边换一个名,我们叫nu。默认我们给一个零对吧,默认给一个零,相当于超全局的一个变量,只是在这里边给了一个零,在这里给了一个零,那我们现在可以在任何地方都使用这个状态管理了,因为我们现在你看啊,我们把这个暴露出去,然后呢,在主方法里边是不是使用这个状态管理,我们也使用路由,使用路由的时候,是不是相当于我们在VE里边有个有个什么全局属性,叫做RO和RO对吧,有这两个全局属性,那状态管理也是一样的,如果我们用状态管理,如果我们用状态管理,那么在我们的每一个里边,也就是都有了一个到to这样的一个呃状态S不是STT这样的一个状态,那我们在任何地方都可以使用这个状态,那在任何地方都使用这个状态,那想象一下,相当于在我们任何地方都使用路由内,感觉是一样的,那我们现在在我们的home这个页面,你看。
12:45
我们现在这不加加管理管理的这个嘛,那我这块再来一个H2这块,我们来一个分线给它分割开啊,HR来个线给它分割开,然后我们这块是使用使用呃全局的状态,使用全局的状态,就会使用全局状态,然后我们这块再来一个HR0。
13:08
等我了。管H2在这里边我们使用,你看怎么使用呢,直接倒了符,呃。啊,直接SK这样的话就能找到我们全局的状态管理,全局状态管理里边有个什么,有一个什么nu对吧。来,我们看一下。不是说在全局里边,这个里边使用am,而是这个它代表的是全局的状态,也就是我们这个里边代是不是代表整个这个状态对不对,这个状态里边是不是有个s sta,有一个这个对不对,所以呢,我们需要在这里边加上s sta,找到我们这个里边的,因为导符s sta状态管理代表的是这个,这个里边的s sta是不是找到这个了,然后这里边有个对,有个属性是n nu,所以呢,我们需要在home这块。
14:03
加上点nu是这样,那我们说明的是总总不够提示。在后里边使用A。不对,这个名称写错了,大家也注意,这个名称不能写错什么呢?因为它是状态管理存储实像这个名s to对不对,所以呢,这块它全局变量是s to这个名字总基组ST,因为呢,这样的模式很少很少这么使用啊,很少这么使用,那你看ST里边状态里边的,这是它的里边的相当于呃,全局变量就相当于它加到view里边去了,咱们在这块这么使用这个你看使用的s tore嘛,使用这名字就相当于把它加view里边去了,所以呢,全局的变量名s starre是这个。看到了吧,使用这个,那我们现在在就能找到这个,找到这个之后,我们在任何组件里边,我们通过它都可以使用,如果在这些里边的方法里面使用,在这些里边方法使用,比如说meg hod方法,诶加上S别忘了。
15:04
方法这里边使用,假如说有个ad的一个直播方法,用起来的时候,就是这次里边的对吧,包符tu通过它来完成里边等等等等对吧,比如说加加呀,减减呢就可以了,当然了,咱们不能直接这么加加,当然也可以,你看我现在就直接这么加加,你看正策管理是零对不对,那我下边再做两个按钮。来做两个按钮,这玩是访问全局的,那我这块不是用这个加加了,我是这个A了,你看A不是在这里边对声明的,而是在我们VX里边状态管理声明的,那我们到时s stare.sta.AUM减减,那我这块同样对吧,就得变成什么包tore.SSTa.a加加加。你看我们现在也有这按钮,加在今天可不可以,你看是不是也可以对吧,上面是单页的对吧,下面是这个。那在这里边直接可以用,那我们同样你看中度管理,我就复制这一条,那我们在hello word里边是不是也是可以用的,就不用出去传传递过来了,那我这块也加一个H21个线吧。
16:06
然后我加个H3使用全局,呃,在hero,嗯,Hello。Word组件中应用全局应用什么应用VX对吧,我这块加入这个,然后我粘贴过来,你看在这块加个这个,下边就多了一个,你看也是上面变,是不是下边也跟着变,当然点这个是嗯,单页的这块用属性传递过来的,这块就用状态管理的。状态管理传过来对吧,那不光是在这用,比如说我现在原封不动的,我把这个粘过来,你看在这个里面,那我这会里边写上这是在呃。路由在另一个另一个页面吧,咱也不说路由组件了,另一个页面对吧?ABOT中应用什么?A,嗯,应用VX状态管理,然后我这块原封不动的粘过来,你看现在我这块22,那我们现在在点这个页面的时候,你看是不是也直接是22对吧,那我这块加加。
17:06
25你看论语里边是不是G25,那我们你都不用想象说如果我不用VS,我怎么把数据传过来对吧,那用这个就很简单就能拿过来。但是呢,这种呢,应用是最直接的,但是呢,它没有经过什么,像我们这个图一样,单页的状态,状态管理很简单,生命状态显示,然后在里边把操作数据,操作数据就操作这个,这就响应式的一个原理,那如果是VE状态管理,它经过这么多一系列VE,对吧,咱们现在用的没有走这个图对吧,所以说有的是可能会出现一些问题,现在呢,能是在ru里边声音一个状态,然后呢在我们每个组件的去用,然后在组件里边直接操作这个状态,反过来操作状态,这样其实是不对的,没有经过这个对吧,但是可以实现效果,但是有的情况下有可能会出错,那咱们下节课咱们再来分一下如何从这个地方操作到这个地方,走这条路线。好。这节课我们先。
我来说两句