使用 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);

  // ...
}