VUE使用keep-alive时，动态刷新数据

项目中每打开一个菜单栏都会在tab栏新增页签，且某计划中编辑和创建计划也会在tab栏新增页签。

不同编辑计划的路由名和组件名一致，但是其路由参数不同，如下图：

router-view使用keep-alive做缓存，项目要求每次重新启动编辑时需要刷新编辑界面数据（即启动编辑后关闭页签再启动编辑的情况），页签未关闭时来回切换不刷新。

由于使用了keep-alive，下次打开同路由同参数的编辑界面并不会刷新数据。

这时候就要用到 activated 这个钩子了，将之前用来初始化数据的方法的 created 钩子替换成 activated，这时候会发现每次打开都会刷新数据了，但是来回切换也会刷新数据，这就不满足第二个条件了。

项目中使用到vuex，在activated钩子中执行初始化方法前，判断启动的编辑计划ID是否存在于store中，存在则跳过初始化；不存在则将ID存入到store中，并执行初始化刷新数据。代码如下：

// store
storeIds: {
  createdPlan: {isOpened: false, ids: []}
}
// 编辑计划
activated () {
    if (this.$store.state.storeIds.createdPlan.ids.includes(`${this.parme.id}${this.parme.type}`)) return;
    let storeIds = Object.assign({}, this.$store.state.storeIds);
    storeIds.createdPlan.ids.push(`${this.tabParme.id}${this.tabParme.type}`);
    this.$store.commit('updateStoreIds', storeIds);
    
    xxx...初始化
}

当页签关闭后删除storeIds中对应的id就行，下次进来就需要进行初始化。代码如下：

let storeIds = Object.assign({}, this.$store.state.storeIds);
storeIds.createdPlan.isOpened = false;
storeIds.createdPlan.ids.splice(storeIds.createdPlan.ids.indexOf(`${item.parme.id}${item.parme.type}`), 1);
this.$store.commit('updateStoreIds', storeIds);

基本实现思路就这样，如果有其他更好的方法，请留言