Add pagination params to axios in Vue

Question

I have this Store:

    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 page:

<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>

But when I click on second page, page URL is: /sell-order?page=3, but submitted request URL is /sell-order, and params does not submitted in Axios.

Where is my mistake?

Answer 1

Vuex actions and mutations are pure functions - they are not bound to any this context. The context is passed as the first argument of the function, so you just need to destructure the object, for example:

fetchResources({ commit, state })

Then you will have direct access to the state - so you would not need the this. prefix

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