Detailed explanation of vue keepAlive cache clearing problem case

Keepalive is often used for caching in Vue projects, which is very convenient for meeting basic requirements. However, it is a bit troublesome to cache or not cache the same page according to different conditions.

First, list the pits:

1.

<keep-alive v-if="xxx">
          <router-view />
</keep-alive>
<keep-alive v-else>
          <router-view />
</keep-alive>

There are many methods like this on the Internet. When using this method, the cached items cannot be deleted. In fact, this method divides the cached pages and non-cached pages into two components for display. Although it looks like that in general, it actually displays different components at different times based on your conditions.

2.

vm.$destroy()

When thinking about removing the existing cache, I guess most people's first reaction is to think about how to delete the cache, so I also tried to find a way to delete the cache. Then the destroy method of vue is called. When it is destroyed, you will be very happy to find that it has been realized! The cache is deleted ~ So you think it's fixed and go to develop something else. Suddenly one day you realize, eh? Why is my page not cached? After some investigation, it was found that pages that called $destroy() would no longer be cached. .

Finally my solution:

Template

<keep-alive :include="keepAlive.join(',')">
         <router-view />
</keep-alive>

vuex

keepAlive: [
        '/joinManage/register/add-step1',
        '/joinManage/register/add-step2',
        '/joinManage/register/add-step3',
        '/joinManage/config/add-step1',
        '/joinManage/config/add-step2',
        '/joinManage/config/add-step3',
        '/joinManage/config/add-step4',
        '/joinManage/config/add-step5',
    ],

Use include+vuex to dynamically change the required cache pages. Include accepts the name of the component (I find naming troublesome here, so I just use the path to name it, but it doesn't actually use the path)

In this way, when we need to cache a certain page, we add its name to the keepalive array, and delete the corresponding one if it is not needed. This will achieve the cache deletion effect of keepAlive

This is the end of this article about the detailed case of vue keepAlive cache clearing problem. For more relevant vue keepAlive cache clearing problem content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!