12. 尚硅谷_mpVue_本地存储，收藏功能实现.avi原创

好，我们接着上课，那么这节课呢，我们去实现什么，实现这个收藏和未收藏的功能，我呢还是先带大家去回顾一下，我们之前这个功能，就点击它收藏成功，再点击取消，再点击收藏，然后退出去呢，再进来的话，它还应该是收藏的状态。好，那这个因为我们做了一遍呢，我会带大家去把整体的思路呢，去串一下啊去串一下，那首先那我先把其他的关掉，在这儿呢，收藏未收藏的图片，哎，咱是不是这个。那这儿这个东西呢，现在已经不能写死了，对吧？啊，那这要写什么呢？是得根据我们是否收藏来决定啊，那这个时候呢，我呢在这儿去，哎，定义个变量collected默认为false，在这儿呢，我们用来表示哎，该文章是否被收藏好哎，有的同学在这儿可能说既然他这个状态也需要改变，你也用VX了，为什么不把这个东西放到VX里边了。

大家想一下啊，我这个状态其实只有我本页面用，我也不需要和其他的组件去通信，哎，那这个时候呢，放到VIVO X里边呢，反而使你这个开发呢，变得更加繁琐啊，变得更加繁琐，记住了，Vivox和Rex什么时候用呢？是多组件之间去共享状态的时候才去用它啊，就好像有的人上来就问，呃，谁知道Rex什么时候才能用啊我。区分不了这个。哎，那可能有人就会告诉你，你在去开发rank项目的时候，写着写着你会发现你的状态没有办法继续写，特别乱，那这个时候呢，你就得考虑，哎，使用什么redux OK，那在这呢，我定一个变量，那这个变量呢，我们应该应用到哪呢？首先得用到这儿，如果说它为处对吧，是一种，哎，那这儿呢，咱是不是应该给人家来一个什么单引号。

是处证明什么收藏为放呢，未收藏，那这儿呢，我是不是应该把这个干掉它。然后呢，前面呢，我们再去加一个什么冒号来让它强制解析好，那这个时候呢，来到这儿我们来看一下。上来是这个对吧，然后呢，来到APP data，找到我们DTL，哎找一下我刚刚定义这个变量是不是在这在这呢，也可以动态修改，诶说明什么？说明我刚刚设置是不对的呀，那你肯定不能在这儿修改，是不是需要给他绑定一个点击事件呀，OK，来一个艾哎tip，那这个呢是handler什么哎collection。处理收藏，然后呢，该方法呢，需要定义在哎我们对应的method里面，那method没有呢，我就去哎写一个它好这个方法首先一点击上来，是不是应该去修改状态，那这个状态呢，LET11个is collected对吧，等于什么呢？等于它原来的那个状态is collected什么法呀。

对吧，哎取反，那接下来我们要做的事情呢，就是说呃，你把这点is collected哎其实一步就能写啊，我给它分成两步，哎，我给它分成两步什么直接等于它就可以啊。好没有问题，那这个时候呢，我们来看一下。点击过来。点击点击点击诶是不好的，然后呢，再去加一个提示，那这个时候呢，我们可能又得用到我们这个微信提供的API，那这些API呢，大家在哎小程序那个官网上也能找到啊，也能找到，那在这儿呢，它需要两个，一个是title，是一个标题对吧，还有呢，是一个提示的图标，我们在这儿还是用之前的。

Success那title，这同样是不不能写死啊，哎，同样不能写死，它呢应该是根据我们的是否收藏的那个状态来决定，这也就是为什么我上边要分开写，如果它为处应该是收藏成功啊，不然呢就是取消收藏好，那这个时候呢，我们来看。点击收藏成功取消，哎，没有问题，也就是说现在在显示上我们已经实现了，那接下来呢，我们还是要练习如何在小程序里面将数据如何缓存到本地，以及来从本地读取数据，因为现在你这个都是假的，我再一进来的话，那再一进来这儿为什么为他呢？那是呃，大家可以看一下啊。

我再点一个，那现在这个东西是不是相当于是都为什么了，都为处了，都为处的本质原因是你可以看一下。在这个里边啊，在这个里边这儿呢，Is collected被修改为触了啊为触了，那那这很明显是不对的，因为它几个页面是不共用了这一个状态啊，哎，共用了这一个状态。好，那呃，待会儿呢，我们去解决这个问题，就是说让他真实的去，哎，显示他的是否收藏的状态，首先我们点击的时候是不是要干嘛，第一步哎，读取之前本地缓存的状态。查看是否收藏对吧。呃，是否收藏，那第二步呢，是。将哎本次设置的结果在缓存到哪缓存到本地，那首先呢，在上面我可以写一个let old，呃，Storage，哎我们表示它等于什么呢？等于微信点get storage，然后呢，我加一个它是吧，表示同步的意思啊那在这呢啊，我们可以写一个比如说我们待会缓存的这个K就叫is collected。

哎，拿到它以后，如果说本地。有我们是不是就能拿到，那现在是不是没有啊，没有的话我们先去做一件事情，我先去给他缓存一个set storage，好，那能用同步，是不是也能用异步啊，那在这呢，得需要一个K叫is collected，那接下来的哎，就是我们要缓存的数据。对吧，啊，那我呢，先给他把这个collected扔进去啊，先扔进去，来我们来看一下，首先来到story，大家看现在是不是没有那个数据啊。

这个log是它这个默认人家添加的缓存啊，我们看一下。哎，是吧，扔进来了呀，那你这扔进来我这是不能读到呀，但是我们说肯定不能直接扔它吗？啊，不能直接扔它，因为你直接扔它的话，是无法区分多个页面的，他们还是共享了一个状态，所以呢，我们应该怎么扔，是不是扔一个对象，而且。之前这个就应该从的时候，你就应该从一个对象进去，对吧？啊这个呢，我们之前讲过，我就这样写。呃，给大家还原一下啊，我可能是let一个，你比如说我们会这样写old，哎，Story，我们初始化是不是一个空对象对吧，然后old sorry，我们通过下标，哎标识呢，去给它扔进去，那这个index当前的页面好像我刚刚给它注掉了，是不是在这儿还是给它打开，那这个时候呢，我们通过index是不是能去从一个。

Is collected，然后呢，你去缓存它呀，一步一步呢给它还原来，那这个时候呢，我们再跑一遍，卡一点，哎，这是不是一个对象K是零，哎就下标值呢，是处没有问题，好呃，我们之前也说过，那你这不能每次出手尔为空，是不是应该拿之前的呀，所以呢，不应该有这一步操作才对啊，那在这呢，我们已经写的差不多了，至于说更详细的内容呢，大家可以看一下原生小程序里面的视频。OK，那这个缓存到这儿为止，你说我们写完了吗。哎，没有写吧，那是因为我刚上来的时候，这里边是不就是没有缓存的一个状态，你比方说我在这是不是可以清除掉它这个缓存啊，那刚上来这儿没有，那这对应的值大家还记得是什么吗？

哎，为空为空。就什么也没有，什么也没有，再通过下边去设置一个值，是不是会报错呀，所以呢，我们会在这个before mount这呢，我们去做一个什么啊，予以处理工作。那这个预处理呢，是预处理本地，哎，是否收藏的缓存工作，OK，呃，在这儿呢，我们也需要去拿一个东西啊，就是storage。对吧，呃，那还是微信点get storage，然后呢，我们还是同步去拿一下，因为在微信里边呢，它不需要不写封号啊，所以呢就习惯了，我一旦换到呃V里边呢，哎，在V里边呢，它是不需要封号的，所以呢换到V这个map view里边，大家看我都我就不写分号了啊，除了这个colo是我设置这个语法模板以外。

好，那这个东西有可能为空，那我们是不是得去判断一下，如果说它为空说明什么？那这个呢，是围空说明呢，用户之前是不是没有点击过那个收藏啊，那这个时候你为了下边不报错的话，你是不是应该给人家去缓存一个空的对象，才能保证我们下边不报错呀，OK，那在这儿呢，首先有一个叫K对吧，那K对应的值呢，也不能瞎写ISA collected，那的话是不是就是一个空对象。嗯，没有问题，好，那else呢，Else说明哎，用户缓存过肯定缓存过，否则的话本地是没有这个缓存数据的，对吧？嗯，或者说是我第一次点进来没有，我再出去再进来，那这个时候也相当于什么，我们缓存了一个贝塔为空对象呀，好，那为空了以后。

你说我们要干嘛呀？那上一步这是为了保证我们下边这是不不犯错呀，那如果说用户缓存过，假如说人家点了收藏呢，那你想你下一次进来的时候，我这个界面这这个状态是不是应该是收藏呀。哎，那这个时候你是不是还得根据他本地缓存这个数据来去动态的修改我们之前初始化的这个状态值呀。那也就是说我要去判断什么，判断这个old story，然后呢，取本页面的。看他是true还是false吧，如果说他为true。是不是收藏过呀？如果没放呢，说明取消收藏吗？那大家想一下，它是不是只有这两种情况呢？

嗯，哎，其实呢，它有三种情况哈，有三种，一种为two缓存过，一种呢false是取消收藏，其实还有一个是安。Find，哎，安为什么会有安find呢？假如说你那个收藏按钮，我根本就没有点击过。哎，没有点击过，那比如说啊，比如说现在这为空对吧，那我取个下标为零的，那对应的值不就是find吗。哎，我们要考虑的周全一点啊，那不管是他没有点击过，还是取消收藏，其实他俩是一样的。因为它最终都是不表示的是未收藏呀，哎，那这个时候呢，我们动态的去修改一下什么，我们初始化那个状态值is collected等于什么呢？等于这个值。

那这个值直接等于呢，有点不太好，因为呢，False和under find，我们要统一的设置为false才好，哎，好一点啊，所以呢，我们会这样去写true，哎，False。对吧，那这呢，因为它是一个整体，所以呢，我们最好呢，是给它加一个什么括号，好，那这个时候我们来看。呃，进来这是没动过对吧，我一点击为零来，重点呢是我出去再进来，它是否是收藏，那我们来看下一个，哎，这是不是就是未收藏呀啊，因为我这儿根本没有点击过它，好那到现在为止呢，我们已经把这个收藏的功能呢给大家讲完了，好那么这节课就到这里。