Nuxt.js: Keep-alive with nuxt-child only not working

[aldarund]

Version

v1.4.0

Reproduction link

https://glitch.com/edit/#!/plausible-shingle?path=pages/ka2/index.vue:8:9

Steps to reproduce

I want some of the pages to have keep-alive ( like 1 or 2). So i tried to use it with nuxt-child.
https://glitch.com/edit/#!/plausible-shingle?path=pages/ka2/index.vue:8:9
https://plausible-shingle.glitch.me/ka2

E.g.
And i see that activated\deactivated got triggered fine for that child page. But the child page still got recreated every time.
But if i also set keep-alive for the core it will work as expected initially.

https://glitch.com/edit/#!/plausible-shingle?path=pages/ka/index.vue:8:9
https://plausible-shingle.glitch.me/ka

So it doesnt work with nuxt-child, only with nuxt.

PS same behavior with nuxt-edge

What is expected ?

page in nuxt-child not recreated

What is actually happening?

page in nuxt-child got recreated every time

_{This bug report is available on Nuxt.js community (#c6970)}

[Yoruchiaki]

me too

[SnirShechter]

Same here

[gotoin]

me too, why not solve this problem, and keep-alive is wrong

[lujie-hybrid]

me too,keep-alive and keepAlive are both not useful, I can not record the position of loading list

[lujie-hybrid]

nuxt is also not useful

[lxx2013]

me too.

I store some important datas to Vuex temporarily. This can solve some problem but it's so inconvenient.

Hope the bug about keep-alive to be solved as quick as possible

[lxx2013]

Actually when I add the keep-alive to <nuxt-child>, and click this child-page , I found that
the created & mounted will not execute , but the data will refresh
When using locaStorage.getItem , this problem is so obvious.
example code:

<template>
  <div>
    <h1>
      {{like? 'Like! [:-)] ':"Do not like [-_-]"}}
    </h1>
    <a @click="toggle">toggle</a>
  </div>
</template>

<script>
export default {
  data ({ req }) {
    return {
      name: req ? 'server' : 'client',
      like: false
    }
  },
  mounted(){
    this.like = localStorage.getItem('like') || false
  },
  methods:{
    toggle(){
      this.like  = ! this.like 
      localStorage.setItem('like',this.like )
    }

  }
}
</script>

when click toggle and then switch the nuxt-child page , It comes to a bad data like

console.log(this.data) //false
console.log(localStorage.getItem('like')) // true

[zhanyouwei]

Actually when I add the keep-alive to <nuxt-child>, and click this child-page , I found that
the created & mounted will not execute , but the data will refresh
When using locaStorage.getItem , this problem is so obvious.
example code:

<template>
  <div>
    <h1>
      {{like? 'Like! [:-)] ':"Do not like [-_-]"}}
    </h1>
    <a @click="toggle">toggle</a>
  </div>
</template>

<script>
export default {
  data ({ req }) {
    return {
      name: req ? 'server' : 'client',
      like: false
    }
  },
  mounted(){
    this.like = localStorage.getItem('like') || false
  },
  methods:{
    toggle(){
      this.like  = ! this.like 
      localStorage.setItem('like',this.like )
    }

  }
}
</script>

when click toggle and then switch the nuxt-child page , It comes to a bad data like

console.log(this.data) //false
console.log(localStorage.getItem('like')) // true

me too

[ousiri]

@aldarund the issue is caused by lacking a top-level <keep-alive/>. When changed to another route, the route-component is destroyed, along with the <keep-alive/>. You can add pages/index.vue providing a <nuxt-child/> with keep-alive like this demo: https://github.com/ousiri/nuxt-keep-alive-test

But there is a remaining question data will refresh every change

[ousiri]

@lxx2013 @zhanyouwei
I found the code that causes the problem. Looks like it is designed that way to update the asyncData when changed to a different route.

https://github.com/nuxt/nuxt.js/blob/055e99a21b0c2f681025c5adc90fef19bed76b96/lib/app/client.js#L455-L457

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.