Vue.js 2分页功能修复请求：点击页码无法加载第三页数据

1. 校验API请求参数与触发逻辑 #

• 检查todosModule.js中的请求代码，确保使用jsonplaceholder要求的_page和_limit参数，且页码值正确传递：

// todosModule.js中的action
async fetchTodos({ commit }, page) {
  const response = await axios.get('https://jsonplaceholder.typicode.com/todos', {
    params: {
      _page: page,
      _limit: 10 // 按需调整每页条数
    }
  });
  commit('SET_TODOS', response.data);
}

• 确认页码变更时，确实触发了该action。比如在分页组件点击事件中，是否正确调用$store.dispatch或通过父组件转发触发请求。

2. 实现URL与分页状态同步 #

• 点击分页按钮时，通过Vue Router更新URL的query参数，同时触发数据加载：

// TodoListPaginationView.vue中的分页点击处理
methods: {
  onPageChange(page) {
    // 更新URL query
    this.$router.push({ query: { ...this.$route.query, page } });
    // 触发数据请求
    this.$store.dispatch('todos/fetchTodos', page);
  }
}

• 监听路由query变化，确保刷新页面或直接访问带页码的URL时能加载对应数据：

// TodoListView.vue中的监听逻辑
watch: {
  '$route.query.page'(newPage) {
    if (newPage) {
      this.$store.dispatch('todos/fetchTodos', parseInt(newPage));
    }
  }
},
mounted() {
  // 初始化时读取URL中的页码，无则默认第一页
  const initialPage = parseInt(this.$route.query.page) || 1;
  this.$store.dispatch('todos/fetchTodos', initialPage);
}

3. 排查请求缓存或重复触发问题 #

• 若第三页请求被浏览器缓存，可添加请求头禁用缓存：

// todosModule.js的请求配置
const response = await axios.get('https://jsonplaceholder.typicode.com/todos', {
  params: { _page: page, _limit: 10 },
  headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' }
});

• 检查store中的mutation是否正确更新数据，避免旧数据覆盖新请求结果：

// todosModule.js的mutation
SET_TODOS(state, todos) {
  state.todos = todos; // 直接替换，而非追加，确保每页数据独立
}

4. 分页组件的状态传递校验 #

• 确认PaginationBootstrap.vue中点击页码时，正确传递了目标页码：

// PaginationBootstrap.vue的页码按钮
<button 
  v-for="page in totalPages" 
  :key="page"
  @click="$emit('page-change', page)"
>
  {{ page }}
</button>

• 父组件需正确监听page-change事件，避免事件未绑定或参数传递错误。

调试步骤 #

1. 打开浏览器Network面板，查看第三页请求是否发起，检查请求URL中的_page参数是否为3。
2. 在store的action和mutation中添加console.log，确认页码参数、返回数据是否正确。
3. 检查Vue DevTools中的store状态，确认第三页数据是否已存入state。

内容的提问来源于stack exchange，提问作者bobrov_site