00:00
大家好,我是学习园地的特约讲师高裸峰,上节课咱们看了一下安装和体验v exx的一个状态管理,那我们看一下,如果是在单页里边管理状态,那我们通过这种方式就可以了,对吧?那单页里边管理状态呢,就是嗯,我们在data里边生明一个数据,然后呢,在模板里边我们可以显示详示显示这个数据,然后呢,在微度视图模板里边,我们可以加事件,点击事件,然后改变这个状态,状态呢又响应式的在这里就发生变化,形成了一个闭环。那如果用v exx来管理数据,那我们是在in带点JS这个文件里边,我们声明一个,呃,通过这个方式来声明一个状态,对吧?相当于在全局声明一个状态等于零,然后呢,我们在任何地方使用的时候,你看我们通过这块使用全局的状态N,那还可以在我们的其他的页面使用这个,然后呢,我们在改变的时候。对吧,通过这种直接改变状态全局的变量,对吧,这样的话我们就能看到我们这样的效果,你看使用全局改变状态,大家那在其他里边也变了,在about里边,这里边你看也变成五是不是也变了,但是呢,按照官方的说法,你看我们打开这个。
01:06
呃,VX,我们把这个改成英文的,中文的,它这块不行,你看它这里边有几个核心的概念,有几个核心的概念有什么,有STT就是我们这里边看一下。嗯,把这个我们拿过来。看到。这里边ST就是我们指的这个概念里边就声明我们想要管理的状态。状态,也就是我们所说的变量,在这里边声明,因为这里边是一个积存格式,你在里边声明什么都可以,对吧,只要符合阶层格式就可以,然后呢,嗯,Get进TR,相当于我们计算属性,后边来讲,那还有一个呃,MU,呃,Mutations对吧,这个还有一个actions,还有model,这些呢,我们都后边讲,你记着它有这么几个核心的概念,核心的一个概念,那我们看一下他官方手册给我们提供的这张图,这是我们单页的,对吧?那这个是我们管理状态的,来我们复制。
02:00
呃,复制图片,我们在画图里面,我们详细讲解一下,新建一个。就不保存了,再过来你看我们把这个最大化,这样我们能看的清楚一些。在电夹你放在中间吧,这样的话我们能看的清楚一些,然后呢,你看我们现在做的实验,现在呢,这里边你看好几个地方。这个里边标绿色的这块告诉我们什么是整个VEX专门来管理状态的,那状态写在哪呢?在这也就是我们在程序里边在哪,在这写的这个状态,那我们前边如果直接来改变它的话,如果这种方式是可以改变的,但这种改变的只能说不能叫状态管理的,只能叫改变状态,因为我们是通过什么,通过在组件里边使用,或者是在我们你看vuee的组件里边使用的时候,我们直接这么操作管理的状态。看到了吧,然后呢,状态改变了,又显示在主件里边,就是我们现在写的程序效果,但是呢,官方不会建议我们这么做的,你看他管理。管理状态需要绕这么大的一个大弯来管理,那怎么管理的呢?你比如说。
03:04
它首先要dispatch dispat什么意思?相当于分发,就是我们在组件里边,我们得分发,然后呢,到哪块,到actions,那actions干嘛?如果我们在一个状态,比如说我们的呃,购物车,或者我们收藏,或者是呃,我们的token这些东西是不是得请求服务器的API,这不是有贝and API就是后台管理,对吧?那我们如果有异步请求的话,那我们就通过这个核心概念,也就在这里边帮我们完成。帮我们完成把数据到服务器端去取,然后取过来再放到这块,也就是如果这个状态里边的数据需要改变,需要到服务器去取的话,那通过这里边儿去找服务器的数据取过来。找过来,然后提交到这里边提啊这个词单词读的不太准那。你如果没有后端,比如说他现在没连接数据库,你就没连接后端,那我可以直接绕过它,直接在模板里边,通过commit提交到这个里边来,通过它,通过这个来修改我们的状态。
04:10
来修改我们的状态,那这有什么好处,通过这个修改,因为通过这个修改可以让我们的有一个工具叫做DV to,这个工具可以观察到我们修改的记录。如果我们直接这么修改,绕过了这个,那你请求服务器数据请求不了,对不对,那绕过了这个,你数据谁修改的,你也不知道,可能会出现一些问题。对吧,那如果通过它就相当于我们风光的一层,通过它这里边方法去修改,用这个呢,就可以管理我们的数据了。然后我们再把刚才的代码改变一下,然后我们再装一下这个工具,大家看一下。你比如说我们现在这里边是这个是可以修改状态的,对不对?改这个,那我们再做一个状态,你看我换一种方式,不是直接这么修改对吧?直接这么修改,咱们说了它是相当于通过这块直接过来,对不对,绕过了其他的环节,那咱们有没有请求后台数据对吧?那咱们直接到这个环节。
05:00
通过它来修改,然后通过他就可以观察修改的进谁修改了,什么时间修改的,怎么修改的,都可以看得到。来,那我们试一下。在我们的,嗯这个里边,我们先在状态里边,我们再声明一个新的状态,这个呢,直接修改呢,我们先留着对吧,先留着,那我们在这个里边有一个状态,那我们再声明一个状态,再是因为状态叫什么呢?叫呃,T nu吧,嗯或者是DEV,呃,Nu随便写一个啊,就d nu吧,简单一点啊,我也生命为零,生命为零,现在呢,在这里边,我现在想在哪呢?想在home这里边,我修改这个状态,这使用全局的,那我们。这个款。变了使用什么?我们将这个你看啊,我们使用这个啊muta。这个来修改使用。Muta啊,这个总这个它这块不会提示啊,嗯,我再看一下这个单词是啊,这块mutat is使用它来。
06:04
来修改。来修改状态。字能来修改状态,你看啊这块来修改状态,那现在如果我什么都不动的话,什么都不动的话你看。你看当然这个修改状态,那我也需要。呃,这块写上TN,咱们做的是D,这里边对DN,那我下边这块我也给它改成一个D对吧,那使用它的修改,然后呢,改成DNM了,那我把这个值我们也传到,比如说嗯,它的哈,这里边不也用到过吗?那我们在下边也传一个对吧,正好我们前面加一个,这是nu冒号。这块是。都放在这块,A冒号这块是d nu冒号,区分一下,那这两个里边有了,那同样这几个数据可以在哪啊,比如说在路由的其他的地方我们也可以使用。
07:02
也可以使用,把它拿过来。在这,然后我们这会缩小一下,看一下。那现在我在这里边,你点击肯定是错的,你看我们把这个F12。嗯,F12,我们打开这个控制台,我们把这个标示位等于式。你看一下我们现在使用啊。DDM。你刷新一下没变化,你看这块对吧,使用使用这个来修改,但是我们现还没做呢,现在还没做呢,只是这个数字变化,这个数字还没变化。嗯,DM在home里边,我们看一下。啊,这块我们前面加一个DA um,那么看到这个呃变化,当然了,我们现在修改它不会变化对吧,现在它不会变化,因为我们还没使用的修改,只是写着还是直接改原来的NM对不对,那如果想使用它修改的话,我们就需要既然使用这个来修改,那我们在这里边已经有了这个,这里边呢,我就随便定义两个两个方法,两个方法我叫做呃,Sub是减减的方法。
08:05
他会默认把这个传传给他的参数,所以这里边你有接收一个STT,但是你自己生成什么都行,你要知道默认会把这个状态给我们放进来,用它来管理,所以叫做状态管理嘛,对吧,所以呢,会把这个传来,你在调的时候不用传这个参数,那它会帮我们自动把这个参数传过来,后边我会专门讲这个参数,然后呢。点它里边d nu,比如说减减。减减方法你看也是对它减减,但是通过方法进行减减了,但这里是减测格式,Ad减价跟它一样,ST里边可以写多少个方法都行,对吧?st.nu加加,你看我在这里边减减,在这里边加加,然后呢,既然经过它去修改的数据通过这个方法,但是方法里边你写其他程序都可以,对不对,那我们在使用的地方,比如说在这地方我们就不能调用了,不能这么调用了,我们随便写一个,比如这里边我们写一个减减吧,Subb。呃,SUB1法为了跟那个区别开,不是直接调用的那个,那我们这块叫做ad a de这样的一个方法,那这个方法调用的谁啊,是不是在这里边得有一个ADD。
09:09
ADE和什么加加的方法和这里边有个sub,当然这名称你可以随便写啊。那这里边呢,我们是通过点击这个按钮,肯定是调用这个方法,这相当于是单页里边我们写的方法,这没什么变化,但是呢,我们得让它去调用谁啊,通过组件里边我们写的方法对不对,我们得调用到这个里边的方法,然后它来改我们的状态,是这样的一个结构,对吧?所以既然通过它的方法,那我们看这里边能不能调用到这次里边to是不是是咱们说在这里边用这个,嗯,View里边加进去的全局属性,也就是在这里边。我们加进来的这个对不对,那这里边是不是有包括T啊这个全局属性了,对吧?既然有这个全局属性,那么我们在这里边就可以使用这个全局属性,然后用它这里边怎么能调用到。怎么能调用到这里边的啊,这里边儿的这个方法对吧,那我们就得用什么。
10:05
用这里边的CU提交提交,提交它到那里边去。提交,提交到通过这里边的提交方法,就可以找到我们这里边儿这个区域的这个方法里边我们直接写方法名就行了,先别管参数能存,它会自动把状态那个参数传进来,比如说ADB,这里边调ADB,那同样这里边我们调用的时候就会调用什么,你看subb。那就用这两个方法,这样的话我们现在看一下程序。你看啊,现在这个数点点,你看是不是变化了3456,你看这个页面也变化,那我们再到上边看一下这个另外一个路由里边页面是不是也变了,变成六了,对吧,一样,跟我们上面这种效果。跟我们上面那种效果是一样的,3457对不对,和这个效果是一样的,但是呢,又不一样在哪呢?原来我们直接改变状态,现在呢,我们是通过为为有官方给我们提供的一种路径的关系去改的,当然我没有请求后台的,所以这块没调用,如果请求下来的调用这块,那就通过他来管理了,那通过它管理可以通过这个工具,可以看到这个工具是我们调没经常用到的一个工具啊,经常用到一个工具,那以前咱没用过,那现在咱们去装一下。
11:19
嗯,来,咱们这个是属于浏览器的一个插件,浏览器的一个插件,所以呢,咱们就得在这里边。需要更多工具里边扩展程序,看好我这个路径,在这里边去找到这个插件,但这里边现在未装这个插件,那所有这个插件呢,你都可以到的网络应用商城里边去搜索插件去安装,当然了,所有的插件它其实就是用GS写的程序,对吧,那用G,因为浏览器它只是GS嘛,用GS写程序,那你也可以用NTM包去安装,对吧?到getate,嗯,到我们getate HUB里边去下载。去下载,然后呢搜索下载,然后安装,但是呢,你不如直接都给你安装,都给你编译好了,我只要在这里引入它就行了,就是一个GS,所以你可以用外派D那种去编译,自己去安装,也可以使用官方去安装。
12:07
但现在一个问题就是咱现在所有的使用都是最新版本,使用VIVO3.0脚手架最新的,所以呢,我们也得下载最新的这个第一位top啊POS这个来支持,那我们到应用商城里边去找一下。点开这个找一下应用商城啊,这个应用商城这个。比如说网上产品你可以搜一下,如果你把诅咒删成默认有一个链接对吧,这重要的在这里边,你搜索一下我最大话啊。搜索一下什么插件都可以,只要你想用都可以在这搜索啊d tos搜索这插件。网络有点慢,我看一下你看搜到了对吧,搜到时候有这两个版本,那我们说了,现在呢,只有最新的版本才支持。你看这个工具呢,是也是VIVO官方提供的,对吧,那这个提供方VIVO官方的开发版贝版测试版嘛,你看。
13:04
测试版我们点开这个。看一下这个测试吧。测试版呢?这个工具有的时候不太好装,有的时候不太好用,你看一下我们这个说明,你看这是Chrome和火狐对吧,DV开发的工具。对吧,来调试vuee的一个应用程序的,来调试应用程序的,你看这个开发工具对吧,Debug调试它的这个应用,当前的这个贝塔的一个版本,但是你可以你可以去,呃,用翻译器翻译一下,我翻译的不太准啊,那看它是VO3的,V3的一个支持,V3的支持,那现在还是一个开发的阶段,还是一开发阶段,那当前仅支持VU3仅支持像组件,现在其他的还在继续开发中,所以呢,我们这个状态管理还看不到用这个。那我现在又不想给你装回VIVO2对吧,装以前的那个老版本,因为VIVO3现在它怎么现在最新的就是自己备的版本,应该是六点几六点零点几对吧,但是现在呢,只只有它支持VIVO3。
14:09
只有它支持三,另外呢,只支持VIVO3里边,你看现在只支持组件查看观察组件的对吧,其他的不支持,所以呢,你要想等待其他的支持,你还需要再等待一下现在的版本,你看6.0对吧,你给下四点几或者五点几,那你对应的V2的时候,那你都可以看了。都可以看了,那咱们现在也别管这个,咱们就。把它装上。但是就是你看这块提示,我添加到我的扩展里边,添加到我扩展里边。然后正在检查物理进价。这样的话,在我们的应用扩展里边就可以看到,添加完就可以看到了,看到有这样的一个插件了,但是现在咱遗憾的是就是我们嗯,使用这个观察我们mutations里边这个改变状态的改变,现在观察不了。只有这个版本支持,这个版本现在只能支持什么普通的一些其他的状态更改,然后呢,告诉我们是否添加到里边,如果你有的账号,你添加,比如你家里的电脑,工作的电脑,那他就开始同步了,都装上这个画边了,那我现在没有注册这个没有什么用,所以呢。
15:09
就不点这个,然后在扩展程序里边,你看我们就有了一个这个。有了这个,那我们看详细信息,详细信息里边我们已经启用了,然后呢,我们允许访问网页,允许访问网页网址就可以了,现在我们到未有演示这块我们刷新一下。刷新一下,刷新一下的时候,呃,你在这个地方就可以看到有vuee这个工具了,那我们把它用这个,那么固定在我程序里边绿色的,如果是灰色的就证明用不了啊,它只能在我们开发环境下用。开发环境应用,如果你是生产环境已经运行的程序了,那他就用不了了,你看可以访问网站,那我们刷新一下。嗯,这个现在没出来,那我现在关掉,因为只在这块是有了,但是我们现在还用不了关掉,我现在在呃提一下。然后我们在F12一下重新启动F12,你看这就多了一个vuee,这就多了一个VE。
16:02
历史看书啊,你看那在这块多了一个uee,点开你看这无uee,当然了,你喜欢比如说它比较重要,那你可以把它往前调都可以了,你看现在可以看到什么,要是能看到状态管理就好了,你看在这块点击这个的时候,现在呢可以看什么,可以看我们组件,也可以看我们什么,可以看我们的路由,你看现在我这里边儿有两个路由对吧,首页和关于两个路由,你看我点击的时候,它这块能看到切换,就是看路由对不对,然后呢,我们也可以看我们的组件,现在你看组件最上层的。是APP这个组件挂载了,然后APP里面有两个路由,这个路由的时候。你看看路由的时候,这个路由属于哪块,这个你看下边是关于我们对不对,然后关于我们里边属性,我们是通过属性传了一个属性过去,对不对。然后这个啊,这个是关于我们这个,关于我们这个首页对吧,那下边。这个首页点击首页,你看现在当前的首页,我们看这个。
17:01
首页里面名字缺省的,然后路由是根里边的数据属性都可以看到。当前这个。刷新一下。关心一下。你看home这个属性,你看在home这块我们有date c0,你看我们这里边有没有他都能看到这状态,单页的状态现在就能看到,嗯,Home里边it是不是里边管理的一个这个状态,这是在模板里边房的状态,而hello word里边我们的状态是什么?Hello word里边这是hello word。Hello word里边我们现在用到的组件是这个,里边是不是我们设置的一个属性对吧?接收的这个,那我们现在点hello word你看里边是通过属性加的这个,那不管是哪个,我只要改变,你看我们这个是改变单页模板的。你看是不是这属性就会跟着变对吧?能记录这个状态,那现在这里边我改的它就记录不了,那里边这块我们也记录不了,因为这些是写在VEX里的状态,对吧?这也是v exx的状态对吧?你正好现在是跟踪不了,因为现在这个版本的DV top还不支持我们去看这个状态,那我们在这里边也可以切换路由,你看正常的话,我们点这个小图标运行的时候,我们就可以看到这里边,我刚才操作你看状态管理吗?它通过这个工具可以看到我刚才在什么时间,我点击的什么,你看这里边都有,对吧,都记住。
18:21
任何一个点你看这个变化啊,你看鼠标一放上去的时候,你看这个位置对吧,然后我现在这个时候改变的值是零对吧?这个时候呢,改变的值啊,这个时候改变的值你看都可以看得到对吧?这是根据运行,当然这个你还可以添加这些你都可以去掉。对吧,就留一个,但是现在这里边没有一个v exx就管理状态了,如果有VX,那我们我们直接修改的这种你不会在这看到而什么,而通过这种修改的,在这个工具里边就可以看到,就像刚才咱们看本页一样,什么时间点击了对吧,什么时间修改的,谁修改的等等都可以看到,通过它来管理了,这样有助于我们开发调试程序。
19:02
但是这个新版现在有点遗憾,我不能给你看到这样的效果,那你可以装一下VV12项目,然后再装老版本的这个对吧,DV to这样工具就可以看了。所以跟大家说明这节课主要说明的就是什么,就是这个工具是咱们写VE的时候经常使用的状态管理,当然了,如果你对页面结构比较了解的话,你不用这工,它只是调试工具帮你观察的对不对,开发时候用的DV嘛,开发的一个工具对不对?对吧,所以呢,有它之后能有很大的帮助,但是不用它对吧,你直接用这个去看代码也是没问题的,但是我就想告诉你,用状态管理改变的时候,进入它可以看到。而且这东西现在暂时看不了。那那这就是这节课内容,记得状态管理,我们以后没有什么特殊情况下不直接去修改对吧,要是通过这边修改,当然了,只是让你了解一下这个图对吧?这官方给我们提供的一个状态修改的一个流程,只有通过这些流程来修改的,这才叫管理,对吧?那不然的话就是一个状态了,为什么叫状态管理啊,对吧,就是因为我们可以通过有这个步骤action对吧,有这个mus这两个。
20:08
经过去去更改。好,谢谢大家,这节课我们就讲到。
我来说两句