我在使用 vue 创建分页时遇到问题。我的任务是确保当您单击按钮的数字时，会加载 jsonplaceholder 中的新任务。

我已成功加载第一页和第二页。我认为这与我的 this.fetchTodos() 操作直接相关。我刚刚学习 vue，需要帮助弄清楚如何在不加载的情况下移动到新页面时更新数据。

在这种情况下，需要改变页面的url（获取请求）。我的页面状态正在更改，但单击第三页时未加载帖子。

下面是四个文件的代码，我认为可以帮助您了解情况。

也许使用 GitHub 会更容易，请检查分页分支

预先感谢您的帮助！如果您有疑问或需要更多信息，请写在评论中

TodoListView.vue - 是起始页面，其中todos 获取并呈现在页面上。

TodoListPaginationView - 是第二个文件，在单击分页时加载第二个页面和另一个页面。

PaginationBootstrap.vue - 第三个文件，其中是分页逻辑。 Ui引导程序5文件。

tod​​osModule.js - 最后一个文件，其中是 todos 的 vuex 逻辑。

import axios from "axios";
export const todosModule = {
    state: () => ({
        todos: [],
        page: 1,
        limit: 10,
        totalPages: 0,
        isTodosLoading: false,
        searchQuery: '',
    }),
    mutations: {
        setTodos(state, todos) {
            state.todos = todos
        },
        setPage(state, page) {
            state.page = page
        },
        setTotalPages(state, totalPages) {
            state.totalPages = totalPages
        },
        setLoadingTodos(state, bool) {
            state.isTodosLoading = bool
        },
        setCompleted(state, completed) {
            const index = state.todos.findIndex(todo => todo.id === completed.id);
            state.todos[index].completed = completed.completed
        },
        setCompletedToAllTodo(state) {
            state.todos.map(obj => {
                obj.completed = true
            })
        },
        removeTodo(state, id) {
            const index = state.todos.findIndex(todo => todo.id === id)
            state.todos.splice(index, 1)
        },
        addTodo(state, todo) {
            state.todos.unshift(todo);
        },
        setTitle(state, tusk) {
            const index = state.todos.findIndex(todo => todo.id === tusk.id);
            state.todos[index].title = tusk.title
        },
        setSearchQuery(state, searchQuery) {
            state.searchQuery = searchQuery;
        }
    },
    actions: {
        async fetchTodos({state, commit}) {
            try {
                commit('setLoadingTodos' , true)
                const response = await axios.get('https://jsonplaceholder.typicode.com/todos', {
                    params: {
                        _page: state.page,
                        _limit: state.limit
                    }
                })
                commit('setTotalPages', Math.ceil(response.headers['x-total-count'] / state.limit))
                commit('setTodos', response.data)
            }
            catch (e) {
                console.log(e)
            }
            finally {
                commit('setLoadingTodos', false)
            }
        },
        async getCurrentPage({commit}, currentPage) {
            try {
                commit('setPage', currentPage)
            }
            catch (e) {
                console.log(e);
            }
        }
    },
    getters: {
      searchedTodos(state) {
          return [...state.todos].filter(todo => todo.title.toLowerCase().includes(state.searchQuery.toLowerCase()))
      },
    },
    namespaced: true
}