带有axios - paginate的Laravel 8和Vue 3

// Laravel 控制器示例
public function index(Request $request)
{
    $perPage = $request->input('per_page', 10);
    $users = User::paginate($perPage);
    return response()->json($users);
}

// Vue 3 组件示例
<template>
  <div>
    <ul>
      <li v-for="user in paginatedUsers" :key="user.id">{{ user.name }}</li>
    </ul>
    <paginate
      :page-count="totalPages"
      :click-handler="fetchUsers"
      :prev-text="'Prev'"
      :next-text="'Next'"
      :container-class="'pagination'"
    ></paginate>
  </div>
</template>

<script>
import axios from 'axios';
import Paginate from 'vue-paginate';

export default {
  components: {
    Paginate
  },
  data() {
    return {
      users: [],
      currentPage: 1,
      totalPages: 1
    };
  },
  computed: {
    paginatedUsers() {
      return this.users.slice((this.currentPage - 1) * 10, this.currentPage * 10);
    }
  },
  methods: {
    fetchUsers(page) {
      axios.get(`/api/users?page=${page}`)
        .then(response => {
          this.users = response.data.data;
          this.totalPages = response.data.last_page;
          this.currentPage = page;
        });
    }
  },
  mounted() {
    this.fetchUsers(this.currentPage);
  }
};
</script>

// Laravel 控制器示例，使用缓存
public function index(Request $request)
{
    $perPage = $request->input('per_page', 10);
    $cacheKey = 'users_page_' . $request->input('page', 1);
    $users = Cache::remember($cacheKey, 60, function () use ($perPage) {
        return User::paginate($perPage);
    });
    return response()->json($users);
}