Javascript 将分页参数添加到Vue中的axios

我有一个

商店

：

    const getDefaultState = () => {
        return {
            resources: Object,
            loading: false,
            query: {
                title: null,
                page: 1
            },
            checked: {
                type: Array,
                required: false
            },
            resource: null
        };
    };

    export default {
        namespaced: true,
        state: getDefaultState(),

        getters: {
            resources(state) {
                return state.resources;
            }
        },

        mutations: {
            RESET_STATE(state) {
                Object.assign(state, getDefaultState());
            },
            SET_RESOURCES(state, resources) {
                state.resources = resources;
            },
            SET_QUERY(state, query) {
                state.query = query;
            },
            CHECK_RESOURCE(state, resource) {
                if (state.checked.includes(resource)) {
                    state.checked = state.checked
                        .slice(0, resource)
                        .concat(state.checked.slice(i + 1, state.checked.length));
                } else {
                    state.checked.push(resource);
                }
            },
            FETCH_START(state) {
                state.loading = true;
            },
            FETCH_END(state) {
                state.loading = false;
            }
        },
        actions: {
            resetState({ commit }) {
                commit("RESET_STATE");
            },

            fetchResources({ commit }) {
                commit("FETCH_START");
                debugger;
                axios
                    .get(route("sell_orders.index"), { params: this.state.query })
                    .then(response => {
                        return commit("SET_RESOURCES", response.data);
                    })
                    .catch(error => {
                        throw new Error(error);
                    })
                    .finally(() => commit("FETCH_END"));
            },

            checkResource({ commit }, resource) {
                commit("CHECK_RESOURCE", resource);
            },

            setQuery({ commit }, query) {
                commit("SET_QUERY", query);
            }
        }
    };

Vue页面：

<template>
    <div class="w-full">
        <div class="card-header">
            <span>{{ __("validation.attributes.sell_order_id") }}</span>
        </div>
        <div class="card-body">
            <sell-order-search
                :query="this.$store.state.sellOrder.query"
                @search="this.search"
                @reset="this.reset"
            ></sell-order-search>

            <scale-loader 
            v-if="this.$store.state.sellOrder.loading" 
            :loading="true"
            ></scale-loader>

            <div v-else>
                <sell-order-table
                    :resources="this.$store.state.sellOrder.resources"
                    @select="checkResource"
                    v-slot="slotProps"
                >
                    <template class="flex justify-between">
                        <router-link
                            class="btn-blue"
                            :to="{ name: 'sellOrderEdit', params: { 
                                id: slotProps.resource.id 
                                } }"
                            v-if="Auth.can('UpdateSellOrder')"
                        >
                            <font-awesome-icon icon="pen" class="align-middle">
                            </font-awesome-icon>
                            <span>{{ __("words.edit") }}</span>
                        </router-link>

                        <router-link
                            class="btn-red"
                            :to="{ name: 'sellOrderDelete', params: { 
                                id: slotProps.resource.id 
                                } }"
                            v-if="Auth.can('DeleteSellOrder')"
                        >
                            <font-awesome-icon icon="trash" class="align-middle">
                            </font-awesome-icon>
                            <span>{{ __("words.delete") }}</span>
                        </router-link>

                        <router-link
                            class="btn-orange"
                            :to="{ name: 'sellOrderShow', params: { 
                                id: slotProps.resource.id 
                            } }"
                            v-if="Auth.can('ShowSellOrder')"
                        >
                            <font-awesome-icon icon="eye" class="align-middle">
                            </font-awesome-icon>
                            <span>{{ __("words.show") }}</span>
                        </router-link>
                    </template>
                </sell-order-table>

                <pagination 
                    :meta="this.$store.state.sellOrder.resources.meta" 
                    @paginate="paginate"
                ></pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
    name: "sellOrderIndexPage",

    computed: mapState(["resources", "loading", "query"]),

    methods: {
        checkResource(resource) {
            return this.$store.dispatch("sellOrder/checkResource");
        },
        getResources() {
            this.$store.dispatch("sellOrder/fetchResources");
        },

        paginate(page) {
            debugger;
            let query = {
                page: page,
                title: this.$store.state.sellOrder.query.title
            };
            this.$store.dispatch("sellOrder/setQuery", { 
                query: query 
                });
            this.$router.push({ 
                name: "sellOrderIndex", 
                query: query 
            });
        },

        search() {
            this.$router.push({ 
                name: "sellOrderIndex", 
                query: this.store.query 
            });
        },
        reset() {
            this.$store.dispatch("sellOrder/resetState");
        }
    },

    created() {
        if (this.$route.query.page) {
            this.$store.state.sellOrder.query.page = this.$route.query.page;
        }
        if (this.$route.query.title) {
            this.$store.state.sellOrder.query.title = this.$route.query.title;
        }
        this.getResources();
    }
};
</script>

{{{（“validation.attributes.sell\u order\u id”）}
{{{（“words.edit”）}
{{{（“words.delete”）}
{{{（“words.show”）}
从“vuex”导入{MapGetter，mapState}；
导出默认值{
名称：“sellOrderIndexPage”，
计算：mapState（[“资源”，“加载”，“查询]），
方法：{
检查资源（资源）{
返回此.$store.dispatch（“sellOrder/checkResource”）；
},
获取资源（）{
此.$store.dispatch（“sellOrder/fetchResources”）；
},
分页（第页）{
调试器；
让查询={
第页：第页，
标题：this.$store.state.sellOrder.query.title
};
这是.store.dispatch（“sellOrder/setQuery”{
查询：查询
});
这是。$router.push（{
名称：“sellOrderIndex”，
查询：查询
});
},
搜索（）{
这是。$router.push（{
名称：“sellOrderIndex”，
查询：this.store.query
});
},
重置（）{
此.$store.dispatch（“sellOrder/resetState”）；
}
},
创建（）{
if（此.$route.query.page）{
this.$store.state.sellOrder.query.page=this.$route.query.page；
}
if（此.$route.query.title）{
this.$store.state.sellOrder.query.title=this.$route.query.title；
}
这是getResources（）；
}
};

但当我单击第二个页面时，页面URL为：

/sell order？page=3

，但提交的请求URL为

/sell order

，并且在Axios中未提交参数

---

我的错误在哪里？

Vuex操作和突变是纯函数-它们不绑定到任何

此

上下文。上下文作为函数的第一个参数传递，因此您只需要对对象进行分解，例如：

fetchResources({ commit, state })

然后您将可以直接访问

状态

——因此您不需要

这个前缀。

前缀

.get(route("sell_orders.index"), { params: state.query })

---

fetchResources（{commit}）

应该是

fetchResources（{commit，state}）

-然后您将引用它，而不使用

this作为前缀。

@IVOGELOV谢谢dude。很好。请提交您的答案，以便接受。