Skip to content

Value getting computed on route changes #110

Open
@mainrs

Description

@mainrs

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! :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions