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

一、keepalive简介

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

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

keepalive组件总共有三个参数

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

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

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

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

二、代码实现

技术栈：nuxt2

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

2.1、store/index.js

store

keepIncludeArr: [],

mutations

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

2.2、layouts/default.vue

nuxt标签增加keepalive相关配置

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

computed引入vuex定义的state

1. computed: {
2.     ...mapState([
3. 'keepIncludeArr'
4.     ])
5. }

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

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

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

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

2.5、经测试，满足使用。

三、相关内容

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

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