Nuxt.js: Data is not being reseted between pages

[TravisKut]

Versions

• nuxt: 2.14.4
• node: 12.14.0

Reproduction

https://codesandbox.io/s/tender-burnell-cxr2z

-->

Steps to reproduce

Theres 3 links (Index2, index3, index3 with params)
index2: just plain page
index3: plain page with some rendered data
index3(/index3?edit=1): same page but with asyncData called when url has query(edit=1)

1) Go to /index3?edit=1, asyncData will load and merge to data
2) Go to index2
3) Go to index3

What is Expected?

Data to be reseted on index3 (with no params)
Index3 with no params should output "initial" inside textarea

What is actually happening?

Merged data from asyncData stays forever, even if you go to index2 then index3.

[Jchann24]

I think that is what Nuxt expected behaviour (?) because index3 page with or without the query params still read the same data. (maybe cache?)

workaround?

async asyncData({ $axios, query }) {
    if (query.hasOwnProperty("edit")) {
      if (query.edit > 0) {
        return await $axios
          .get("https://cat-fact.herokuapp.com/facts/")
          .then(res => res.data)
          .catch(() => {});
      }
    }
  },
  mounted() {
    if (!("edit" in this.$route.query)) {
      this.all = [{ text: "initial" }];
    }

I'm open to discussion still learning too 😅 🎒

[TravisKut]

workaround?

I don't think this is a good solution - it's not flexible
I have a lot of pages, and different initial data inside, and asyncData methods have different logic

It should reset data between pages

[rafail-dev]

"asyncData" should always return something
but your "asyncData" code in some cases returns nothing

async asyncData({ $axios, query }) {
  if (query.hasOwnProperty("edit")) {
    if (query.edit > 0) {
      return await $axios
        .get("https://cat-fact.herokuapp.com/facts/")
        .then(res => res.data)
        .catch(() => {});
    }
  }
  //Add this
  return {}
}

upd: I changed the name (-index3.vue => index3.vue),
i could not run sandbox with "-index3.vue file", I thought it was a typo
I think this is the reason for the error,

[TravisKut]

"asyncData" should always return something
but your "asyncData" code in some cases returns nothing

async asyncData({ $axios, query }) {
  if (query.hasOwnProperty("edit")) {
    if (query.edit > 0) {
      return await $axios
        .get("https://cat-fact.herokuapp.com/facts/")
        .then(res => res.data)
        .catch(() => {});
    }
  }
  //Add this
  return {}
}

no, this doesn't fix the problem

[rafail-dev]

no, this doesn't fix the problem

why? what am I doing wrong?
https://codesandbox.io/s/sad-northcutt-ozydw?file=/pages/index3.vue

also I changed the name (-index3.vue => index3.vue) (probably this was the reason for the error)
(I thought it was a typo)

My steps to reproduce (gif)

[TravisKut]

no, this doesn't fix the problem

why? what am I doing wrong?
https://codesandbox.io/s/sad-northcutt-ozydw?file=/pages/index3.vue

also I changed the name (-index3.vue => index3.vue) (probably this was the reason for the error)
(I thought it was a typo)

My steps to reproduce (gif)

yes, thanks! You resolved my issue. Nuxt might was merging data with undefined

I didn't know that asyncData should always return something (at least an empty object), can you link me to docs?

[rafail-dev]

I didn't know that asyncData should always return something (at least an empty object), can you link me to docs?

In the examples in the documentation, the method always returns something, even if it's an empty object.

I think in any case it is logically wrong to do merge with nothing

example from docs with return {}

https://nuxtjs.org/guide/async-data#use-reqres-objects

export default {
  async asyncData({ req, res }) {
    // Please check if you are on the server side before
    // using req and res
    if (process.server) {
      return { host: req.headers.host }
    }

    return {}
  }
}