Vue 分页查询可以通过 Vuex 状态管理和 axios HTTP 请求库实现：1. 创建分页状态，包括每页记录数、当前页码和加载状态；2. 使用 axios 获取数据，更新状态，并在加载期间显示加载指示器；3. 创建分页器组件控制导航；4. 监听状态变化，并在值发生变化时重新获取数据；5. 在视图中使用分页数据，如通过 v-for 指令遍历并显示记录。
Vue 分页查询的实现
在 Vue 中实现分页查询可以提升大型数据集的加载和显示效率。本文将逐步介绍如何使用 Vuex 状态管理和 axios HTTP 请求库来实现 Vue 分页查询。
1. 在 Vuex 中创建分页状态
首先，在 Vuex 状态管理中创建分页状态，该状态将存储每页的记录数、当前页码和正在加载数据的布尔值。例如：
const state = {
currentPage: 1,
pageSize: 10,
isLoading: false,
}2. 获取数据并更新状态
接下来，在组件的方法中使用 axios 向服务器发送 HTTP 请求以获取数据。在请求之前，将 isLoading 状态设置为 true，以在数据加载期间显示加载指示器。
async fetchRecords() {
this.isLoading = true;
const res = await axios.get(`/api/records?page=${this.currentPage}&size=${this.pageSize}`);
this.records = res.data;
this.isLoading = false;
}3. 创建分页器组件
创建分页器组件来控制分页行为。该组件应提供导航按钮以在不同页面之间移动。
vue-store高仿小米商城
下载
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算
立即学习“前端免费学习笔记（深入）”；
4. 监听状态变化并重新获取数据
在组件中监听 currentPage 或 pageSize 状态变化，并在值发生变化时重新获取数据。
watch: {
currentPage() {
this.fetchRecords();
},
pageSize() {
this.currentPage = 1;
this.fetchRecords();
},
}5. 在视图中使用分页数据
最后，在视图中使用分页后的数据。例如，可以使用 v-for 指令来遍历记录并将其显示在表格中。
ID 名称 {{ record.id }} {{ record.name }}
