Method of Cleaning Cache after vue uses keep alive

  • 2021-11-10 08:45:47
  • OfStack

What is keepalive?

In normal development, some components do not need to be initialized many times. At this time, we need to persist the components to keep their state unchanged, and we will not reinitialize the components in the next demonstration.

That is to say, keepalive is a built-in component of Vue, which can keep the included components in state or avoid re-rendering. The so-called component cache

Basic usage


<keep-alive>
    <component />  // Your components 
</keep-alive>

Requirements: Enter the details page from the list page, and then return to the list page to retain the query conditions, but when switching other tab, empty the query conditions.

Solution: It is very simple to retain the query conditions, and directly introduce keep-alive, but if it is cleared, vue itself is not cleared directly by api, so it should be handled separately.

Reference article: http://aspedrom.com/5HD5

router/index, blocking routes and processing:


beforeRouteLeave:function(to, from, next){
    //  Increase cleanup when leaving the route keep-alive
    if (from && from.meta.rank && to.meta.rank && from.meta.rank == to.meta.rank)
    {// The judgment here is that if you return to 1 Layer, you can change the judgment logic here according to your own business, and decide whether to destroy this layer cache at your discretion. 
        if (this.$vnode && this.$vnode.data.keepAlive)
        {
            if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
            {
                if (this.$vnode.componentOptions)
                {
                    var key = this.$vnode.key == null
                                ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                : this.$vnode.key;
                    var cache = this.$vnode.parent.componentInstance.cache;
                    var keys  = this.$vnode.parent.componentInstance.keys;
                    if (cache[key])
                    {
                        if (keys.length) {
                            var index = keys.indexOf(key);
                            if (index > -1) {
                                keys.splice(index, 1);
                            }
                        }
                        delete cache[key];
                    }
                }
            }
        }
        this.$destroy();
    }
    next();
},

Also add meta to the route:


{
    //  Account list 
    path: '/account',
    name: 'account',
    component: () => import('../views/account/index.vue'),
    meta: { title: ' Account list ' ,rank:1.5}
  },
  {
    //  Add an account 
    path: '/accountadd',
    name: 'accountadd',
    component: () => import('../views/account/add.vue'),
    meta: { title: ' Add an account ' ,rank:2.5}
  },
  {
    //  Edit account number 
    path: '/accountedit/:id',
    name: 'accountedit',
    component: () => import('../views/account/add.vue'),
    meta: { title: ' Edit account number ' ,rank:2.5}
  },
  {
    //  Role list 
    path: '/role',
    name: 'role',
    component: () => import('../views/role/index.vue'),
    meta: { title: ' Role list ' ,rank:1.5}
  },

Summarize


Related articles: