如何在 vue 中使用 axios 传递可选的查询参数？

Question

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 .

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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