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}

您还可以直接破坏响应并获取数据。不确定如果使用then()和async为何会做出类似await的承诺。

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

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

2 个答案: