将状态数据从存储访问到字符串 vue.js 中

Question

嘿伙计们，所以我正在尝试将商店中的状态数据添加到操作中的一个 axios 调用中的字符串中。这是我的商店：

export const store = new Vuex.Store
({
state: {
participants: [],
filterTags: ["foo", "swag"],
page: 1,
perPage: 2,
filterTagName: "",
}
}

这是我的行动呼吁：

actions: {
async loadParticipants ({commit}) {
try {
console.log(this.state.page);
await axios
.get('/dash/participant?perPage=2&page=1&string=f')
.then(r => r.data)
.then(participants => {
console.log(participants.docs);
console.log("Hit me");
commit('setParticipants', participants)
})
}
catch (e) {
if (e.response)
console.log(e.response);
throw e
}
}

我想在 axios 调用中将商店的状态数据添加到它说 { 在此处插入数据 } 的位置：

.get('/dash/participant?perPage={INSERT DATA HERE }&page={ INSERT DATA HERE }&string=f')

任何意见感谢谢谢！

Answer 1

在您的操作中，您可以访问整个商店，因此，您只能获取将参数声明为({commit})的提交，您也可以添加状态：

async loadParticipants ({commit, state}) {

因此，您可以在方法主体中使用state变量：

actions: {
async loadParticipants ({commit, state}) {
try {
console.log(this.state.page);
await axios
.get(`/dash/participant?perPage=${state.perPage}&page=${state.page}&string=${state.filterTagName}`)
.then(r => r.data)
.then(participants => {
console.log(participants.docs);
console.log("Hit me");
commit('setParticipants', participants)
})
}
catch (e) {
if (e.response)
console.log(e.response);
throw e
}
}
}

Answer 2

所以你只想用 vuex 存储中的值填充你的查询参数？ 只需将state传递到您的行动中即可。然后，您可以在模板迭代的帮助下将状态添加到查询参数中。${some-js-variable}

您也可以直接破坏响应并抓取数据。 不知道为什么如果你使用async和await，你会做出像then()陈述这样的承诺。

actions: {
async loadParticipants ({commit, state}) {
try {
const {data} = await axios.get(`/dash/participant?perPage=${state.perPage}&page=${state.page}&string=f`)
console.log(data)
}
catch (e) {
if (e.response)
console.log(e.response);
throw e
}
}