Vue3一行代码写完列表请求和分页状态控制？增加你摸鱼时间以及准点下班的技巧

在Vue 3中，你可以使用<script setup>语法糖和Composition API来简化你的代码。以下是一个简单的例子，展示了如何用一行代码实现列表请求和分页状态控制：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="fetchList(currentPage - 1)">上一页</button>
    <button @click="fetchList(currentPage + 1)">下一页</button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
 
const list = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
 
const fetchList = async (page) => {
  if (page < 1 || page > Math.ceil(total.value / pageSize.value)) return;
  const { data } = await axios.get('your-api-endpoint', {
    params: { page, pageSize: pageSize.value }
  });
  list.value = data.items;
  currentPage.value = page;
  total.value = data.total || 0;
};
 
onMounted(() => {
  fetchList(1);
});
</script>

这段代码实现了以下功能：

1. 定义了list，currentPage，pageSize和total作为响应式状态。
2. 实现了fetchList函数，它处理API请求和状态更新。
3. 使用onMounted生命周期钩子在组件挂载时请求第一页数据。
4. 通过模板提供了分页的用户界面，并通过点击按钮触发页码的变更。