Static GitHub Issues

[1134] asyncData reverting after data modified

prev: How to watch file changes and run script?
next: Fetch and AsyncData not working on reloading page.

I've got an issue where I'm setting some data with asyncData, I then update that data, then I change page and the data reverts.

So basically I call another function from asyncData in a page component like this:

asyncData (context) {
  return ApiPage.getPage(context, context.params.page, 'pages', 'page')
}

Then the file with that function is this (_ApiPage.js):

const masterData = {
  body: '',
  form: null,
  formData: null,
  hasChildren: false,
  header: '',
  id: '',
  label: '',
  name: '',
  sideMenu: [],
  subLabel: '',
  subHeader: null
}

const AxiosError = function (status, message) {
  return {
    response: {
      status: status,
      data: {
        message: message
      }
    }
  }
}

export default {
  mixins: {
    methods: {
      reloadSideMenu () {
        if (this.slug !== '' && this.hasChildren) {
          this.$axios.get(this.$store.getters.getApiUrl('menus/home/' + this.slug))
            .then((res) => {
              this.sideMenu = res.data
            })
        }
      }
    }
  },
  getPage ({ error, store, app }, slug, patchUrlPrefix, cmsKey) {
    return app.$axios.get(slug)
      .then((res) => {
        if (res.statusCode) {
          throw new AxiosError(res.statusCode, res.message)
        }
        if (typeof res.data !== 'object' || !res.data.id) {
          throw new AxiosError(404, '')
        }
        let newData = Object.assign({
          slug: slug
        }, masterData, res.data)
        if (store.getters.getAuthUser() && store.getters.hasRole('ROLE_ADMIN')) {
          newData.patchUrl = store.getters.getApiUrl(patchUrlPrefix + '/' + res.data.id)
          store.commit('cms/initEndpoint', {
            endpoint: newData.patchUrl,
            initKey: cmsKey
          })
        }
        //  Set whether any further requests are now needed
        let loadSideMenu = newData.slug !== '' && newData.hasChildren
        let loadForm = newData.form
        if (!loadSideMenu && !loadForm) {
          return newData
        }
        // Setup extra requests
        let requests = []
        let loadPaths = {
          form: store.getters.getApiUrl('form/' + slug),
          sideMenu: store.getters.getApiUrl('menus/home/' + slug)
        }
        if (loadForm) {
          requests.push(app.$axios.get(loadPaths.form))
        }
        if (loadSideMenu) {
          requests.push(app.$axios.get(loadPaths.sideMenu))
        }
        // Process sub-requests
        return Promise.all(requests)
          .then((allRes) => {
            for (const res of allRes) {
              switch (res.config.url) {
                case loadPaths.form:
                  newData = Object.assign(newData, {
                    formData: Object.assign(
                      {},
                      {
                        lastModified: res.headers['last-modified']
                      },
                      res.data
                    )
                  })
                  break
                case loadPaths.sideMenu:
                  newData = Object.assign(newData, {
                    sideMenu: res.data
                  })
                  break
              }
            }
            return newData
          })
          .catch((err) => {
            error({
              statusCode: err.response.status,
              message: 'The page\'s dependencies could not be loaded'
            })
          })
      })
      .catch((err) => {
        if (err.response) {
          error({
            statusCode: err.response.status,
            message: (err.response.status === 404 ? 'Page could not be found' : err.response.data.message)
          })
        } else {
          if (typeof err === 'string') {
            error({
              statusCode: 500,
              message: err
            })
          } else {
            error({
              statusCode: 500,
              message: 'An error occurred'
            })
          }
        }
      })
  }
}

So I load data and populate sideMenu. When I update some pages, the title will affect the URL that needs to be in the menu. So I refresh the menu with the reloadSideMenu method - so far so good.

I then go to another page which using the _ApiPage.js file. The sideMenu variable then reverts to the original state that asyncData had set for the page. I've tried logging to the console, and nowhere in my scripts where I set that variable is being reached.

Any ideas?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c996">#c996</a>)</em></sub></div>