How many components can be cached using Vue keep-alive?

Question

I'm using keep-alive in the router-view like this:

<keep-alive>
  <router-view></router-view>
<keep-alive>

So I'm saving all "pages" of my app. My questions:

How many components can keep-alive save?
Can I program something to make keep-alive save just one component (the last one)?

Thanks in advance

Have you seen this? stackoverflow.com/questions/48661595/… It looks like you can use the include option on keep-alive to be dynamic array (v-bind:include="[ 'dashboard' ] in the example). So you could try and keep only the name of the last loaded component in that array — zizzo
Hello @zizzo thanks for the response. I did see it, but I could not think how I can use this logic to destroy the current keep-alive and save the next one :/ I don't know the current component that is keeped alive and neither the next one. Do you know how I can do it? — Marina
I have never tried, but I guess you could use a navigation guard, and before the new components gets loaded (because user wants to browse a new page) you can save the name of current component in the keep-alive's include array and remove the previous one, so that the v-bind:include="componentsArray" will always only have one component. — zizzo
@zizzo It's a pretty good ideia. I'll try it. Thank you very much! — Marina

Marina Marina · Accepted Answer · 2018-11-15T20:45:32

I found a solution for my problem using the sugestion of @zizzo. I saved in the vuex the component that I wanted to save when I want to save (the last one). The code stayed like this:

<keep-alive :include="[componentToKeepAlive.name]">
  <router-view></router-view>
<keep-alive>


...mapGetters({
  componentToKeepAlive: 'global/componentToKeepAlive'
})

How many components can be cached using Vue keep-alive?

1 Answers