vue.js - 如何将数据从 Data 函数传递到 Nuxt 中的 AsyncData

Question

我想将数据从 Data 函数发送到 Nuxt 中的 asyncData。

我试过这个

  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'
        })
      })

我也试过这个

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

我也尝试使用 ES6

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

但它总是返回错误

无法读取未定义的属性“currentPage”

标签： vue.jsnuxt.js

Answer 1

您可以使用 VueX 商店

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

   console.log(store.state.myData)

 }) 

在您安装的集合数据到商店

mounted(){

this.$store.setData(this.pageNumberCount)


}