How can I pass query parameters optional using axios in vue?-CodePudding

I try like this :

const actions = {
    getData ({ commit }, payload) {
      const params = {}
      if(payload) {
        if (payload.dateFrom) { params.date_from = payload.dateFrom }
        if (payload.dateTo) { params.date_to = payload.dateTo}
      }
      axios
        .get(`${api}/reports/list`, {params})
        .then(r => r.data)
        .then(res => {
          console.log(res)
        })
    }
}

If I console.log(payload), the result like this :

{from: '2022-07-01', to: '2022-07-30'}

payload is optional

My code is working. But I want to know if there is a more concise way to express it.

CodePudding user response：

You can conditional add property to object like this:

const actions = {
  getData({ commit }, payload) {
    const params = {
      ...(payload?.dateFrom && {
        date_from: payload.dateFrom
      }),
      ...(payload?.dateTo && {
        date_to: payload.dateTo
      })
    };
    axios
      .get(`${api}/reports/list`, { params })
      .then((r) => r.data)
      .then((res) => {
        console.log(res);
      });
  }
};

CodePudding user response：

One idea is to default the param, then conditionally add its props, like...

getData ({ commit }, payload={}) {
  const params = {
    ...(payload.from ? {from: payload.from}: {}),
    ...(payload.to ? {to: payload.to}: {}),
  }
  axios
    .get(`${api}/reports/list`, {params})  // etc

That's still a little bit clumsy conditional inclusion of key-value pairs. Another idea, since it's really a kind of pick, you could code that explicitly (and reuse it elsewhere)...

// pick, thanks to https://stackoverflow.com/a/56592365/294949
function pick(obj={}, keys=[])
  return Object.fromEntries(
    keys.filter(key => key in obj).map(key => [key, obj[key]])
  );
}

Then getData is...

getData ({ commit }, payload) {
  const params = pick(payload, ['from', 'to']);
  axios
    .get(`${api}/reports/list`, {params})  // etc

edit if the key names will change, then it's not a pick. The first idea still works, and given the switch is probably close to minimal code...

getData ({ commit }, payload={}) {
  const params = {
    ...(payload.dateFrom ? {date_from: payload.dateFrom}: {}),
    ...(payload.dateTo ? {date_to: payload.dateTo}: {}),
  }
  axios
    .get(`${api}/reports/list`, {params})  // etc

CodePudding user response：

Maybe you can try this:

const actions = {
    getData ({ commit }, payload) {
      const params = { ...payload }
      axios
        .get(`${api}/reports/list`, { params })
        .then(r => r.data)
        .then(res => {
          console.log(res)
        })
    }
}

CodePudding user response：

try this.

  getTest({ commit }, { from = undefined, to = undefined }) {
    axios
      .get(`api/reports/list`, { params: { from, to } })
      .then((r) => r.data)
      .then((res) => {
        console.log(res);
      });
  }

so when you want to use the action you can do these

this.$store.dispatch("getTest", { from: 121 });

this.$store.dispatch("getTest",{}); //at least an empty Object