Nuxt.js-手写一个分页组件

1、HTML && CSS

@/components/Paginationn.vue

2、Store

@/store/pagination.js

export const state = () => ({
  offset: 0,
})

export const mutations = {
  // 上一页
  PRE_PAGE(state, offset) {
    state.offset -= offset
  },
  // 下一页
  NEXT_PAGE(state, offset) {
    state.offset += offset
  },
  GO_PAGE(state, offset) {
    state.offset = offset
  },
}

3、使用

import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination,
  },
  methods:{
    async getByPage(page) {
      // 获取第 page 页数据
    }
  }
}

4、效果