使用vue3 pinia 写出表格分页的代码

这里是一个基于 Vue3 和 Pinia 的表格分页示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">Prev</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()

    function prevPage() {
      store.currentPage -= 1
    }

    function nextPage() {
      store.currentPage += 1
    }

    return {
      users: store.users,
      currentPage: store.currentPage,
      totalPages: store.totalPages,
      prevPage,
      nextPage,
    }
  },
})
</script>

在这个示例中，我们假设 `store` 包含以下状态：

const store = defineStore({
  id: 'users',
  state: () => ({
    users: [],
    currentPage: 1,
    totalPages: 1,
  }),
  actions: {
    async fetchUsers() {
      const response = await fetch('/api/users')
      const data = await response.json()
      this.users = data
      this.totalPages = Math.ceil(data.length / PAGE_SIZE)
    },
  },
})

在 `setup` 函数中，我们使用 `useStore` Hook 获取 `store` 实例，并将 `users`、`currentPage` 和 `totalPages` 映射到组件中。`prevPage` 和 `nextPage` 方法分别将 `currentPage` 的值减少或增加，从而实现翻页。我们还使用 `:disabled` 属性来禁用“Prev”和“Next”按钮的点击，以防止翻到首尾页的情况。