Description
Hi! I am really new to Vue and NuxtJS, so please bare with me if this is a common problem or missing, general knowledge :)
I have created a component that defines asyncComputed
data, as I do access content using @nuxtjs/content
and they only provide a Promise-based API.
computed: mapState({
items: (state) => state.user.items,
}),
asyncComputed: {
rows: {
async get() {
const items = this.items
const rows = []
console.log(`Running asyncComputed: ${items}`)
// Adding some rows. Calls await this.$content(...) multiple times
return rows
},
watch: ['items'],
},
},
watch: {
items(newValue) {
alert(`items: ${newValue}`)
},
rows(newValue) {
alert(`rows: ${newValue}`)
},
},
The global state contains a list of items that I need to properly calculate the data. I iterate over them inside of rows
. The data gets displayed without problems, but when changing routes and going back, I can see the alert pop up with the text rows: ...
. The items alert doesn't get shown a single time. From my understanding, no alert should get shown, as I tell the asyncComputed
function to only re-run if items
changes using the watch functionality.
I think the solution to my problem is the shouldUpdate
method, but I am not entirely sure if that is a) the case and b) how to tell it to update "if the mapped items state changes" and use the computed value in every other case.
Thanks for taking your time and a happy new Year's Eve! :)