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>