Vue keep-alive缓存管理，简单store模式实现

keep-alive 缓存页面实现a->b(缓存)->c，b(销毁)->a。

一、注意

1. b退出时调用this.$destroy()会导致第二次进入b不会缓存；
2. <keep-alive :include="appKeepAlive">...</keep-alive> appKeepAlive如果是数组，重置数据需要保证数组指向对象不改变。

二、实现代码

<!--template-->
<keep-alive :include="appKeepAlive">
  <router-view />
</keep-alive>

//vue js
data() {
  return {
    appKeepAlive: KeepAliveStore.state.appKeepAlive,
  };
}

//KeepAliveStore
/**
 * @Author: LuoYang
 * @Email: toluoyang@qq.com
 * @Date: 2021/10/31 2:51 下午
 * @Description: keep-alive 缓存
 */
export default {
  debug: true,
  state: {
    appKeepAlive: [],
    homeKeepAlive: [],
  },

  keepAliveClear() {
  	//注意重置数据方法需保证数组指向对象不变，用array=[]、array.length=0都会导致缓存不能预期缓存和销毁
    if (this.debug) console.log("keepAliveClear triggered");
    
    this.state.appKeepAlive.splice(0, this.state.appKeepAlive.length);
    this.state.homeKeepAlive.splice(0, this.state.homeKeepAlive);
  },

  appKeepAliveAdd(value) {
    if (this.debug) console.log("appKeepAliveAdd triggered with", value);

    this.state.appKeepAlive.push(value);
  },
  appKeepAliveRemove(value) {
    let index = this.state.appKeepAlive.indexOf(value);
    if (index !== -1) {
      if (this.debug) console.log("appKeepAliveAdd triggered", value);

      this.state.appKeepAlive.splice(index, 1);
    }
  },

  homeKeepAliveeAdd(value) {
    if (this.debug) console.log("homeKeepAliveeAdd triggered with", value);

    this.state.homeKeepAlive.push(value);
  },
  homeKeepAliveRemove(value) {
    let index = this.state.homeKeepAlive.indexOf(value);
    if (index !== -1) {
      if (this.debug) console.log("homeKeepAliveRemove triggered", value);

      this.state.homeKeepAlive.splice(index, 1);
    }
  },
};