1.store中添加

const list = {
    state: {
        pageNumber: 1,
        pageSize: 1,
    },

    mutations: {
        SET_PAGE(state,payload) {
            let {
                pageNumber,
                pageSize
            } = payload;
            state.pageNumber = pageNumber;
            state.pageSize = pageSize;
        }
    }
};

export default list

在store/index.js中引入list模块。

2.组件页面添加

(1)

<template>
  <div id="app">
  
    <span class="demonstration">完整功能</span>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="pageNumber"
      :page-size="pageSize"
      :page-sizes="[1, 2, 3,]"
      :total="5"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

  </div>
</template>

<script>
import { mapState, mapMutations, } from "vuex";

export default {
  name: "app",
  computed: {
    ...mapState({
      pageNumber: state => state.list.pageNumber,
      pageSize: state => state.list.pageSize
    })
  },
  methods: {
    ...mapMutations(["SET_PAGE"]),

    // 1.更新分页参数
    setPageNum(nextPage) {
      let pageParams = {
        pageNumber: nextPage,
        pageSize: this.pageSize
      };
      this.SET_PAGE(pageParams);
    },
    setPageSize(nextSize) {
      let pageParams = {
        pageNumber: this.pageNumber,
        pageSize: nextSize
      };
      this.SET_PAGE(pageParams);
    },

    // 2.获取分页数据
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`);
      this.setPageNum(currentPage);
      // this.getDataApi(pageNumber,pageSize)
    },
    handleSizeChange(currentSize) {
      console.log(`每页 ${currentSize} 条`);
      this.setPageSize(currentSize);
      // this.getDataApi(pageNumber,pageSize)
    },
  },
};
</script>

<style>

</style>

简要实现如上，后续优化~ 期待大佬指点~