cordova 实现网页缓存_Cordova+vue混合开发缓存列表数据的实现方法

在使用vue开发单页面应用程序的时候，列表数据是经常会出现的，加载列表数据的逻辑通常是写在列表页面的created或者mounted钩子里面的：

mounted

用户通常的行为是点击列表的某一项会跳转一个新的页面。问题往往就从这里开始了，为了解决单向数据流和但页面程序数据共享的问题，通常会使用vuex配合vue来开发，也会用到vue-router来作为前端页面的路由控制。

当加载数据的时候，犹豫数据量的问题，翻页是很有必要的(例子是针对移动端向下滑动加载更多)，首先把数据加载的类型分为两种，一种是APPEND，另一种是SET。

可以理解为列表初始化的时候，在state里面有一个dataList：

state & mutations

上面的图片应该很好理解，我们可以在action面做如下控制：

action

这样在页面获取数据的时候，可以传入type参数来控制是追加数据还是刷新数据。初始化的时候是SET，后面翻页都是APPEND

接下来问题就出现了，往往，在我们点击列表数据跳转页面之后，再返回的时候，期望是返回到原来我们页面的位置，也就是滚动的高度要保留。但是页面初始化的时候，我们会刷新列表数据，也就是说原来的很多页数据已经不存在了，只有第一页的数据。

这个问题可以使用vue-router巧妙的解决，首先在跳转页面之前，可以加一段逻辑处理：

url替换

通过replace方法，替换掉当前的页面的url，'/current/page/path'就是当前页面的path，query是新加的参数，keepList是是否加载数据的标示，currentPage是当前列表的页数，scrollTop是页面的滚动高度，这个滚动高度需要根据实际情况(滚动的容器)去设置。

当然如果页面还有其他的查询参数也要补充进去，这样我们这个页面的url就被更新了。之后，在mounted钩子中添加如下逻辑处理：

mounted钩子

这样在返回到列表页面的时候，如果查询参数中有我们设置的值，列表数据就会保留，并且滚动到之前离开时候的位置，如果没有，那就会出发初始化列表数据的逻辑，加载列表。

往往我们在离开列表数据的时候，需要将state中的dataList置空，防止下次进入页面加载未返回结果时，显示的是老数据，一般情况下，通常会在vue-router的beforeRouteLeave钩子中做这件事情，这里只需要加一个判断的逻辑，把我们需要保留的path过滤掉就好：

过滤path