我有这个商店:
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>
但是当我点击第二页时，页面URL是:/sell-order?page=3，但提交的请求URL是/sell-order，并且params不在axios中提交。
我的错误在哪里？
最佳答案
Vuex 操作和突变是纯函数 - 它们不绑定(bind)到任何 this 上下文。上下文作为函数的第一个参数传递，因此您只需解构对象，例如:
fetchResources({ commit, state })
然后您将可以直接访问state - 因此您不需要this.前缀
.get(route("sell_orders.index"), { params: state.query })
关于javascript - 在Vue中向axios添加分页参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57935056/