使用asyncData进行Nuxt分页

Question

是否可以在nuxt中使用asyncData进行分页？我有这样的代码：

<template>
  <v-container fluid>
    <v-row>
      <v-col
        v-for="sessao in sessoes"
        :key="sessao.id"
        xs="12"
        sm="12"
        md="6"
        lg="4"
      >
        <FotografoSessao :sessao="sessao" :is-mostrar-titulo="true" />
      </v-col>
    </v-row>
    <v-row>
      <v-container class="max-width">
        <v-pagination
          v-model="paginaAtual"
          :length="totalPages"
          :total-visible="10"
          @input="proximo"
        ></v-pagination>
      </v-container>
    </v-row>
  </v-container>
</template>

<script>
export default {
  async asyncData({ $api, store, route }) {
    let url = "/sessao/ultimas";
    if (store.state.auth.isLogged) {
      url = "/sessao/praias/usuario";
    }
    const page = parseInt(route.query.page);
    const retorno = await $api.get(`${url}?page=${page - 1}`);
    return {
      sessoes: retorno.data.content,
      totalPages: retorno.data.totalPages,
      totalItems: retorno.data.content.totalItems,
      paginaAtual: parseInt(page),
    };
  },
  data() {
    return {};
  },
  watchQuery: ["page"],
  methods: {
    proximo(val) {
      const page = parseInt(val);
      this.$router.push({ path: this.$route.path, query: { page: page } });
    },
    recuperarImagem(prop) {
      return "data:image/png;base64," + prop;
    },
  },
};
</script>

所以当我导航到页面时，内容显示得很好。但是当我点击转到下一页"proximo“方法时，asyncData会被执行(因为在我的背部有日志)，但是页面不会更新

Answer 1

首先，删除此部件：

  data() {
    return {};
  },

query可以直接使用，如下所示：

async asyncData({ $api, store, query }) {

  const page = parseInt(query.page);

  // ...
}