CODEWITHSUNDEEP
stringvue.jsaxiosvuex
Michael Gee
Michael Gee

Reputation: 541

access state data from store into a string vue.js

Hey guys so I am trying to add state data from my store into a string in one of my axios calls within actions. Here is my store: 

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

Here is my action call: 

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

I want to add the store's state data where it says { INSERT DATA HERE } within the axios call:

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

Any input appreciated thank you!

Upvotes: 1

Views: 573

Answers (2)

Jakub Juszczak
Jakub Juszczak

Reputation: 7827

So you just want to fill your query params with the values from your vuex store? Just pass the state into your action. And then you can add the state to your query params with a little help of template iterals. ${some-js-variable}

You can also directly destruct the response and grab the data. Not sure why you make promise like then() statements if you use async and 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
  }
}

Upvotes: 1

Sergeon
Sergeon

Reputation: 6788

In your action, you have access to the whole store, so instead to just getting only the commit declaring the param as ({commit}), you can add the state too:

async loadParticipants ({commit, state}) {

So you can use the state variable in your method body:

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

Upvotes: 1

Related Questions