App开发-使用keepAlive，解决页面缓存是否动态刷新的问题

Posted 2022-12-06 L_不觉晓晓

1、APP页面从另一个页面返回保持原有状态

我们经常使用App都知道，比如当我们从一个搜索列表进入商品详情页面，再次从商品详情页面返回列表页面肯定会停留在上次浏览的位置，如果我们再次刷新或者回到列表顶部，这样对用户的操作体验肯定是不友好的，所以我们要首先解决这个问题。

经过查证，发现在router里面有一个keepAlive，只要我们将keepAlive设置为true，他就会帮我们自动缓存记录上次获取的DOM，而不会再次去刷新数据请求新的DOM。

在router.js里面如下设置即可。

  path: '/user-comment',
  name: 'userComment',
  component: () => import(/* webpackChunkName: "order" */ '@/views/Order.vue'),
  meta: 
     index: 2,
     keepAlive: true,
  ,
,

2、随之产生的问题

我们刚刚对某一个页面的路由设置了keepAlive等于true,这样设置我们确实解决了从详情页面返回到列表页面定位在我们上次浏览的地方，但是新的问题产生了。我在App开发负责开发搜索功能，所以我们还是以搜索功能举例，当我从搜索首页输入关键词进行搜索的时候，发现不管我输入什么搜索词都不再起作用，搜索出来的结果都是我们第一次搜索的结果，这样的原因就是因为我们给这个页面路由设置了keepAlive等于true，因为我们上面提到了它会自动帮我们缓存当前页面的DOM，还有主要的问题就是Vue的生命周期钩子的问题，在vue3当中，在不添加keepAlive为true的时候，正常的生命周期是和vue2的差别如下：
Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

在我们设置了keepAlive为true， 页面第一次进入，钩子的触发顺序如上顺序所示，但因为我们使用了keepAlive，所以会新加一个onActivated函数，这个是在被激活时执行，而在退出时触发 onDeactivated 。当再次进入（前进或者后退）时，只触发onActivated函数。这样就解释了我们再次输入关键词进行搜索的时候为什么展示的数据一直是第一次请求的数据了，因为我们再次进入这个页面的时候它无法执行我们的onMounted函数，而我们的初始化请求的API就在这个函数里面调用的。搜索结果页面初始化请求如下：

setup() 
  onMounted(async () => 
    state.isHaveMore = true;
    // 获取搜索值
    const  searchVal  = route.query;
    state.searchVal = searchVal;
    // 调用搜索API
    init(state.searchVal);
  );

3、解决办法-动态判断是否需要再次请求初始化API

 我们既然已经知道了，在设置keepAlive的时候除了第一次会请求初始化API，其他前进或者后退时，只会触发onActivated函数，那我们就要在onActivated函数里面寻求解决办法了。

首先，我们需要用过从哪个页面跳转过来的路由进行区分判断，比如我们从商品详情页面返回过来就是不需要再次刷新页面的，从搜索页面跳转过来就是需要再次发送请求获取数据的，所以，我们需要动态获取一下（前进或者后退）时上一个页面的路由。

 在App.vue里面进行如下设置

  setup() 
    const router = useRouter();
    router.beforeEach((to, from) => 
      // 获取上一个的路由，存放在sessionStorage  
      sessionStorage.setItem('fromPath', from.path);
    );
    return 
    ;
  ,

      html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

      sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

      而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

我们这里只要把获取上一个页面的路由存放在sessionStorage里面就行了，没必要做本地持久化存储。

所以在搜索结果页面里面只要通过onActivated函数来获取路由，在进行判断就OK了，在如下代码我就是判断是否从搜索页面过来的，如果是就再次调用初始化搜索API，求情最新的数据，如果不是就加载缓存，

这样就解决了我们的需求。

setup()
  // 根据跳转过来的路由判断是否刷新页面
  onActivated(() => 
    // 获取路由进行判断
    if (sessionStorage.getItem('fromPath') === '/search') 
      state.isHaveMore = true;
      // 获取搜索值
      const  searchVal  = route.query;
      // 调用搜索API
      state.searchVal = searchVal ;
      init(searchVal);
    
  );

 

如有不足，敬请指出