nuxt使用keep-alive

业务场景：

列表页进入详情页返回，列表页数据缓存还是进入详情页之前的数据

仅有部分页面需要缓存，对需要缓存的页面进行操作

大致实现过程：

1.nuxt设置keep-alive，需要缓存的页面添加name属性

2.通过vuex管理需要缓存的页面/组件

3.需要缓存的页面在进入时判断是否刷新数据，离开进行判断是否需要缓存（滚动位置恢复看情况是否需要）

注意事项

1.name属性不要忘记设置，大小写必须一致

2.不同layouts之间切换会导致nuxt组件刷新，缓存是没有效果的，也就是只有在同一个layout下切换的页面，缓存才能生效

具体步骤

打开layouts文件夹下的对应的layout文件，找到<nuxt>组件，添加keep-alive属性

<nuxt keep-alive :keep-alive-props="{include: includePageNames()}" />

includePageNames函数返回vuex中存储的数组

methods: {
    includePageNames() {
      return this.$accessor.includePageNames
    }
  },

需要缓存的页面/组件中

1.name属性设置

2.beforeRouteEnter进入页面之前判断是否刷新数据

只有从详情页返回才使用缓存，其他页面进入要刷新数据

这一步主要是为了解决，从列表页进入详情页，详情页跳转到其他页面再返回列表页时数据不刷新的问题

3.beforeRouteLeave离开页面进行判断是否需要缓存，更新vuex中的数据

4.activated从详情页返回才会执行，一般用来处理恢复高度等操作，isKeepAlive是其配合的属性，这一步不用可以删除

export default {
  name:'Collection',
  beforeRouteEnter(to, from,next){
    if(from.name&&from.name.includes('collection-id')){
      next()
    }else{
      next(vm => {
        vm.isKeepAlive = false
        vm.$accessor.setIncludePageNames([])
      });
    }
    

  },
  beforeRouteLeave(to, from, next) {
      if (to.name.includes('collection-id')) {
          // this.scrollTop = window.scrollY
          this.isKeepAlive = true
          this.$accessor.setIncludePageNames(['Collection'])
      } else {
          this.isKeepAlive = false
          this.$accessor.setIncludePageNames([])
      }
      next()
  },
  layout: 'defalut',
  data() {
    return {
      total: 0,
      page: 1,
      numPerPage: 10,
      scrollTop: 0,
      listData:[],
      isKeepAlive:false,
    }
  },
  fetch() {
    this.getData()
  },
  activated() {
      // 增加；列表跳详情后，返回保持原有位置
      if (this.isKeepAlive) {
          // this.$nextTick(() => {
          // window.scrollTo(0, this.scrollTop)
          // })
      }
  },
  methods: {
      getData() {}
  }

}

思考：

如果直接设置缓存的页面不使用vuex管理，当需要缓存的页面很多时，我们需要挨个添加，并且缓存数据会一直缓存

上面使用vuex去管理缓存的组件/页面数据，这样即便是多个组件和页面也不用挨个去添加，并且一定情况下也是将页面设置为不缓存，我认为是有一定优化的