How to Pass data from Data function to AsyncData in Nuxt

Question

I want to send data from Data function to asyncData in Nuxt.

I have tried this

  data () {
    return {
      prevpage: null,
      nextpage: null,
      currentPage: 2,
      pageNumbers: [],
      pageNumberCount: 0
    }
  },
  asyncData ({ $axios, error, data }) {
    return $axios
      .get('https://api.themoviedb.org/3/movie/popular?api_key=' + process.env.API_SECRET + '&page=' + this.currentPage)
      .then((response) => {
        return {
          popularmovies: response.data.results
        }
      })
      .catch((e) => {
        error({
          statusCode: 503,
          message: 'Unable to fetch event'
        })
      })

I also tried this

  .get('https://api.themoviedb.org/3/movie/popular?api_key=' + process.env.API_SECRET, {
    params: {
      page: this.currentPage
    }

I also tried to use ES6

  .get(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.API_SECRET}&page=${this.currentPage}`)

But it always returned error

Cannot read property 'currentPage' of undefined

The asyncData hook is executed before the data option is available — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 26, 2020 at 19:39

Abderrahim Soubai-Elidrisi · Accepted Answer · 2020-09-26 19:36:36Z

2

You can use the VueX store

asyncData ({ $axios, error, data , store}) {
   // access to data

   console.log(store.state.myData)

 })

in your mounted set data to the store

mounted(){

this.$store.setData(this.pageNumberCount)


}

answered Sep 26, 2020 at 19:36

Abderrahim Soubai-Elidrisi

5,2621 gold badge31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Liel Fridman · Accepted Answer · 2020-09-26 19:38:15Z

0

It would be better to add a URL parameter for the page, instead of having it inside the local state. Then you can use it with the params property of the context object passed to asyncData.

For example, you can use something like /page/_currentPage.vue inside your pages directory, then you can rewrite your asyncData declaration to be something like asyncData ({ $axios, error, data, params}) and use params.currentPage to access the page received as a parameter. You should also check if it exists, and if it doesn't you can just set the page to 1

edited Sep 26, 2020 at 19:38

answered Sep 26, 2020 at 19:32

Liel Fridman

1,23310 silver badges16 bronze badges

2 Comments

xtremeCODE Over a year ago

I don't understand, can you please elaborate. Thanks

Liel Fridman Over a year ago

I've added an example. Feel free to ask again if it doesn't help

Collectives™ on Stack Overflow

How to Pass data from Data function to AsyncData in Nuxt

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related