先处理之前遗留的问题

点击返回箭头返回首页

image.png
返回按钮，添加一个back事件
image.png
只还有在search页面才会显示返回的箭头。
image.png

注册back事件。navigateTo会直接打开一个新页面。自己不会关闭。这种方式我们pass掉。
image.png
返回上一个页面。
image.png
像我们是直接刷新的当前页，它就没有上一个页面，所以无法返回
image.png
switechTab，直接跳转我们的tabbar
image.png
image.png
点击，回到了首页。
image.png

image.png
加载了一会儿，数据出来了
image.png
再次点击，进入到了搜索页
image.png

搜索页，搜索历史清空事件

image.png
清空其实就是把historyLists这个属性设置为空。
image.png
直接设置为空就可以了
image.png
在actions里面调用
image.png
清空按钮绑定事件
image.png
image.png
加一个提示
image.png
这里加上一个key的属性，要不然会报错
image.png
先来搜索几次，增加vuex里面的数据。
image.png
点击清空按钮
image.png

image.png

搜索历史，刷新页面会被清空

有了搜索历史
image.png
但是当刷新当前页面后。搜索历史就变没了。vuex并不是一个持久化的储存
image.png
每次刷新页面都会从这里去开始，是从一个空数组开始。把我们之前的内容给刷新掉。
image.png
改成一个本地缓存。每次请求之前先从本地缓存中获取
image.png
如果缓存不存在，那么就用一个空数组
image.png
这样就可以完成持久化的操作。
image.png

先造一个历史记录出来。
image.png
刷新当前页面，node还在
image.png
这样去清理本地缓存。
image.png

image.png
刷新页面还存在
image.png

image.png
再次刷新页面
image.png

去掉红色边框

这里之前写css遗留的红色边框。
image.png
image.png
image.png

结束