00:00
好注意啊,我去刷新界面。下面我做的事情是这个样子,大家看我去添加数据,然后呢,我去删除数据,当我一刷新。这数据还是原来的数据。那因为咱们这个数据呢是固定的,所以说这功能还并不是很完美,我们要做的事情是这个样子的,当我在这边做了什么数据的操作,或者说删除了什么数据之后,当我再去刷新界面。这些数据依然存在,换句话来讲,我要把这些数据做成一个缓存的操作,那只要我的数据发生变化,我就应该做缓存的操作,保存到我们浏览器的local storage里边就可以了。那怎么做呢?也就说我这数据发生变化,我是不是就应该把数据存储起来?八那这个数据发生变化,可能是一个数据,可能是多个数据,其实说白了就是我当前的谁呢?APP组件里边的这个DOS。如果我的todos数据发生了变化,那我就应该把数据。直接保存到浏览器的缓存里边,所以说怎么办啊,看我怎么做啊,直接在上边这个位置来上一个什么wa。
01:03
然后我在下边儿。写上一个监视头。我捐什么?就是如果这个todos数组的数据变化了,逗号直接存储到浏览器的缓存中啊,那就来一个wa。好,注意,不是我要监视谁,我要监视的是state对象里边的这个土do词数组。对吧,而且还是一个深层次的解释。那像这种写法的话,我们应该用这种之前讲过的方式,回调函数的方式监视的是state里边的todos数据。对不对,同时我要做什么事情。我要看看里边的Y流数据有没有变化是吧?哎,只要Y流数据发生了变化,我要做的事情就是干嘛呢,保存在保存里边。保存到浏览器的缓存中,哎,那无非就是local storage.set item括号里边来一个什么呢?土do-K吧,然后并且通过Jason点什么呢?String饭的方式。
02:14
把当前的这个什么呢?Todos数据给它存储起来,Todos数据应该是state.todos数据,或者说这个位置直接传入一什么Y流是不是就可以了吧。那将来大家看这里边有个小问题。我是不是应该深层次的监视吧?万一我的数组里边的这个对象,对象里边某个属性发生变化,我是不是应该全都要见识到吧,深层次的建设,所以说这个位置啊,我们还得加上一个东西叫deep,为什么出就可以了。啊,当然呢。这里边儿我先把它干掉。为啥呢?因为这个位置。要把数据存到浏览器的缓存里边,那上边我的这个图注数组,一开始默认的数据应该是空的。我希望在某一个点,或者说是当前界面加载完毕之后,或者说当前这个界面一出现的时候。
03:04
啊,或者说在数据出发之前,我应该把这个数据从浏览器的缓存里面读出来,对不对,那我是不是就会用到在从浏览器里边读缓存的这种操作吧。所以说啊,我做件事情。读缓存和写缓存的这个操作,我把它封装起来。比如说来一个文件夹uts。Us里边我来一个什么呢?LOL localto local storage local storage,然后us。点TS,我写上这么样的一个TS文件,我要在这个TS文件里边把那个存数据和取数据的。操作碰撞起来。那就是point,我就再来一个function,比如说保存,那就是C5什么的,呃,Todo吧,Todos。Todo,那这呢就是一个函数诶。
04:02
如果要是保存大小保存的时候,那你是不是应该给我传过来一个土DOS的这样一个一个数组吧。Todo这样的一个数组,它应该是todo中括号这种类型的没有啊,可以干嘛引入point括号来一个todo from。点点杠,找types里边的这个什么todo。这样这个todo在这就可以用了,对不对,好。这里边该怎么写呢?这是问题。保存,那就是local storage,点什么呢?Set item。里边给他一个key,比如说叫todo todo杠杠key,那我后边这个数据无非用到就什么呢,jason.string饭,然后里边把这个什么呢,土豆丢进来是不是就可以了吧?好注意这是保存数据。保存数据到什么呢?浏览器的缓存中。好,我应该还有一个什么。应该还有一个什么呢?应该是读取数据,读取数据从哪读,从浏览器的什么呢?缓存中读取数据。
05:11
对不对,X。然后FCT,那我这块就写上一个什么呢?Re read todo括号。它应该有个返回值读,把这个数据反出去,那应该也是todo,也是todo这个数组类型。那这里面写什么,直接return。通过jason.pass要去转一下啊,Pass什么东西?Local storage点什么呢?Get it里边这个应该是todo todo下线的这个K。对不对,然后注意啊,万一没有数据呢,你不怕报错吗。所以说是不是应该给他来一个,或者并且给他来一个数组吧,好格式化一下,嗯,这个位置有问题,PAR。啊,格式化一下保存,那我就封装完了一个TS文件,这个文件里边有读和写缓存的这个方法,或者说函数,那我APP当中怎么办。
06:04
好,再看这个位置。我现在是不是就可以从这个位置直接import括号from下边这个点us里边的这个TS文件。从里边我可以找到什么呢C。Todo,还有一个read,不是read todo是吧,这两个函数那我就可以用了。那怎么用呢?那我现在这个监视的这个位置,大家看啊,我直接就可以把它复制过来放到这儿。把它打开。好,我说这个位置都不要了。直接就给我来一什么,直接就给我来一个C,因为我是不是要保存吧,哎,所以说这个位置直接写上一个C。Save to,注意这里边写什么?这里面写什么东西,这里边儿写的是。当前的这个对象数据。或者数组数据对不对啊,那现在我们来看一下,我觉得这个代码好像看起来有些猥琐,我搁着画一下。这传了一个回调,这又是一个回调,这儿就是一个对象,而且这个回调里边是掉了一个方法或者说函数对吧。
07:08
这是一个函数,这儿也是一个函数。这一块的这个函数没有调用,这块这个函数调用了,我说这个代码可以改。可以这么改,这么改。我说无非就是他。格式化一下,大家来看一下。对比一下啊,上边这块需要一个回调,回调里边掉了一个函数,那无非就是我把这个函数直接放到这个位置不就完了吗。是不是注意啊,下边这块是调用,而我现在这个位置,这个第二个参数的位置是不调用,那我就把我这个函数放在这不调用,而且他俩参数是什么呢?一模一样的,所以说我这个watch可以这么去写。是不是好,现在我们再来看。我们再看看上边。这个位置有问题。这个位置是一个什么问题呢。这里边儿这个数据我都不要了。啊,注意这么玩。我说这里边儿数据全都不要了。
08:00
全都不要了啊,一开始默认是一个空数组,当它界面加载完毕之后,读数据界面应该是界面加载后或者界面加载完毕后。过了一会儿再干嘛呢?读取收据,什么叫过了一会儿,就是我给他一个时间呗,是吧,那我可以用on wanted。注意上边我需要引入。啊,在哪在这呢,引入了啊,这是一个生命周期的沟通。咔咔咔咔在这里边。做什么事情?页面加载完毕之后,我需要过了一段时间,那我就给它来一个set out。啊逗号,比如说给他过了一个两秒。卡回调做什么事情?无非就是把我里边的to DOS的这个数据。从哪拿,从我的reader。Read read todo里边去获取一下是不是就可以了吧?然后现在呢,我们做一个保存操作,两秒是不是太长了吧,我们换成一秒吧,保存操作。
09:06
好,这样呢,我们打开这个界面,大家看一下,诶,以前的这个数据就出来了啊,以前这个数据出来了,我就都干掉他们。干掉他不要了,然后我再去刷新一下啊。那我再来一个,比如说啊,咱们有飞哥回车,还有勇哥。啊,还有峰哥。还有什么强哥啊,还有渊哥。元哥啊,还有远哥啊,这些都是哥啊,还有华哥。间隔。间隔。剑哥不太好打,还有晋哥。啊,反正各种歌都被我搞进来了啊,还有雷哥。好回车我们去选中。我觉得谁比我帅,我就把他们删掉。
10:01
啊,清理一下好,没有了是不是啊,已完成的全选全部选勾选。铁剑哥也不事,干掉他,不要他。我觉得我这个操作可能有点太过了啊。我不应该把他们都干掉的,其实我才是最帅的啊啊,这是通过VIEW3加TS的方式,咱们做了一个案例叫todo历史的案例啊,里边做了什么增加呀,删除啊,修改啊啊等等等一系列操作啊,其实到了这大家可以看到,其实通过V53的方式去实现这些功能的时候并不复杂啊,大家只要把这个代码熟练两遍就OK了啊。行,我先把这块停一下啊,至此应该说是V3加TS,咱们课就结束了啊。啊,当然开玩笑的啊。
我来说两句