DEV Community
·
Vue 技巧：设置 Pinia Store + 自定义分页
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文讲解如何在Vue CLI 3中用Pinia实现分页。首先安装Pinia库，在store中定义产品状态，包括每页数量、当前页和总页数。使用axios获取数据并分页。在ProductView.vue中，通过Pinia的状态和方法实现动态产品列表和分页导航。
🎯
关键要点
- 在Vue CLI 3中使用Pinia实现分页的示例。
- 首先安装Pinia库，使用命令：yarn add pinia或npm install pinia。
- 在store中定义产品状态，包括产品列表、每页数量、当前页和总页数。
- 使用axios获取产品数据并进行分页处理。
- 在ProductView.vue中，通过Pinia的状态和方法实现动态产品列表和分页导航。
- 定义store的state、getters和actions以管理产品数据。
- 在组件中使用computed属性来获取产品列表和分页信息。
- 实现页面切换功能，通过changePage方法更新当前页和产品列表。
- 在模板中展示产品信息和分页导航。
➡️
