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'

Answer 1

您可以使用VueX商店

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

   console.log(store.state.myData)

 })

将已装载的集合数据存储到商店中

mounted(){

this.$store.setData(this.pageNumberCount)


}

Answer 2

最好为页面添加URL参数，而不是将其包含在本地状态中。然后，可以将其与传递给params的上下文对象的asyncData属性一起使用。

例如，您可以在页面目录中使用类似/page/_currentPage.vue的东西，然后可以将asyncData声明重写为类似asyncData ({ $axios, error, data, params})的东西，并使用params.currentPage来访问收到的页面参数。您还应该检查它是否存在，如果不存在，可以将页面设置为1

如何在Nuxt中将数据从数据功能传递到AsyncData

2 个答案: