vu e封装一个分页组件

Vue.js (VuEx) 提供了一种状态管理模式，特别适合构建大型、可复用的应用组件，如分页组件。在 Vue 中封装分页组件通常涉及以下几个步骤：

1. 定义状态管理：使用 Vuex 创建一个 store，用于存储当前的页码（currentPage）和总页数（totalPages）。例如：

import { createStore } from 'vuex';
const state = {
  currentPage: 1,
  totalPages: 0
};
const mutations = {
  setCurrentPage(state, page) {
    state.currentPage = page;
  },
  setTotalPages(state, totalPages) {
    state.totalPages = totalPages;
  }
};
const actions = {
  // 异步获取数据的action，更新state
  loadMore({ commit }, params) {
    // 这里模拟从服务器获取数据并更新state
    // commit('setCurrentPage', params.page);
    // commit('setTotalPages', params.totalPages);
  }
};
const getters = {
  getCurrentPage: state => state.currentPage,
  getTotalPages: state => state.totalPages
};
export default createStore({
  state,
  mutations,
  actions,
  getters
});

2. 创建分页组件：组件会监听 store 中的状态变化，并处理用户的交互，比如点击分页按钮。使用 `mapState` 和 `mapActions` 来读取和触发动作：

<template>
  <div>
    <ul>
      <li v-for="page in pages" :key="page">
        {{ page }}
        <button @click="incrementPage(page)" :disabled="page === currentPage">Go to Page</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['currentPage', 'totalPages']),
    pages() {
      return Array.from({ length: this.totalPages }, (_, i) => i + 1);
    }
  },
  methods: {
    incrementPage(page) {
      this.$store.dispatch('loadMore', { page });
    }
  }
};
</script>