nuxt2：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态

一、keepalive简介

相关推荐：vue3-ts：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

keepalive组件总共有三个参数

include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存

exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存

max：可传数字，限制缓存组件的最大数量,默认为10

include包含的 && 排除exclude包含的 就是需要缓存的组件

二、keepalive生命周期

在Vue中，使用KeepAlive组件可以缓存组件的状态，以避免每次组件切换时都重新渲染，提高页面性能。它有一些特殊的生命周期钩子函数，用于维护缓存的组件：

1. activated：当使用<keep-alive>包裹的组件激活时调用，只有在缓存的组件首次被激活时才会被调用。

2. deactivated：当使用<keep-alive>包裹的组件失活时调用，只有在缓存的组件被移除时才会被调用。

三、KeepAlive组件的生命周期函数执行顺序

1. 第一次进入组件时，触发组件的created、mounted、activated钩子函数。

2. 当路由切换，进入缓存组件时，触发组件的activated钩子函数。

3. 当路由切换，离开缓存组件时，触发组件的deactivated钩子函数。

4. 当离开缓存组件时，组件的状态会被保存在缓存中，再次进入该组件时，不会再触发created、mounted钩子函数，而是直接触发activated钩子函数。

需要注意的是，使用<keep-alive>时，组件的销毁时机和生命周期函数的执行顺序也会受到影响。当组件被缓存时，它的销毁时机是不确定的，具体实现会根据缓存策略和内存占用情况来决定。因此，在使用KeepAlive组件时，需要注意组件的生命周期函数和业务逻辑是否受到影响。

四、代码实现

技术栈：nuxt2

思路：列表页点击查看增加缓存，实现从详情回到列表回到离开时的状态；点菜单清除缓存，实现展示新数据/初始化状态。

4.1、store/index.js

store

keepIncludeArr: [],

 mutations

setKeepIncludeArr(state, payload){
    state.keepIncludeArr = payload;
}

4.2、layouts/default.vue

nuxt标签增加keepalive相关配置

<nuxt keep-alive :keep-alive-props="{ include: keepIncludeArr }" />

computed引入vuex定义的state

computed: {
    ...mapState([
        'keepIncludeArr'
    ])
}

4.3、业务页面设置name

name: 'JurisdictionIndex',

4.4、业务页面点查看增加缓存

this.$store.commit('setKeepIncludeArr', ['JurisdictionIndex'])

4.5、菜单文件menu.vue，点菜单清除缓存

this.$store.commit('setKeepIncludeArr', [])

4.6、回到列表页更新数据

当在详情页编辑侯，回到列表页面需要更新数据，我们可以在 keepalive 的 activated 生命周期调用 获取列表页数据的方法，参数会保留当时的参数 

activated () {
    this.getList()
},

4.7、经测试，满足使用

五、相关内容

vue3-ts：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态_snow@li的博客-CSDN博客

六、欢迎交流指正，关注我，一起学习。