概要

本サイトの活動ログ（Activity）が増えてきたので、paging機能を追加してみました。

UIコントロールはまんまVuetifyのPaginationsコントロールを使っています。

実装内容

まずは、paginationコントロールを配置します。

      <v-row v-if="totalPage > 1">
        <v-pagination
          v-model="page"
          :length="totalPage"
          circle
          @input="goToPage"
        ></v-pagination>
      </v-row>

次に、以下のような感じで、page数などのプロパティを定義しておきます。

• itemsPerPageという変数で、１ページあたりの表示数を定義
• pageというプロパティで、現在のページ数を取得（検索APIを呼ぶ際に、vuexのstoreに定義しておきます。）
• totalPageというプロパティで、検索結果の合計件数から1ページあたりの表示件数を使って、合計のページ数を計算します。
• さらにページネーションのページ番号が更新された処理を goToPage に定義しておきます。

const itemsPerPage = 21
export default {
  async fetch({ store, query }) {
    const page = query.page || 1
    const skip = (page - 1) * itemsPerPage
    await store.commit('activities/list/setPage', page)
    await store.dispatch('activities/list/GET_ACTIVITIES', {
      type: 'latest',
      skip,
      limit: itemsPerPage
    })
  },
  computed: {
    page: {
      get() {
        return this.$store.state.activities.list.page
      }
    },
    totalPage: {
      get() {
        return (
          Math.floor(this.$store.state.activities.list.total / itemsPerPage) + 1
        )
      }
    }
  },
  methods: {
    async goToPage(page) {
      const skip = (page - 1) * itemsPerPage
      await this.$store.commit('activities/list/setPage', page)
      await this.$store.dispatch('activities/list/GET_ACTIVITIES', {
        type: 'latest',
        skip,
        limit: itemsPerPage
      })
    }
  }
}

これで、以下のようにページャーが表示されるようになりました。

以上になります。