Передача нескольких точек данных в действие?VUEX

Question

Итак, у меня есть форма, которая собирает 3 точки данных, которые выглядят следующим образом:

<form class="" >
  <table>
    <tr>
      <td>Maximum Temperature</td>
      <td><input class="setSettings" v-model="settings.maxTMP" type="number" max="30" min="5"></td>
    </tr>
    <tr>
      <td>Minimum Humidity</td>
      <td><input class="setSettings" v-model="settings.minHUM" type="number" max="95" min="20"></td>
    </tr>
    <tr>
      <td>Maximum CO2</td>
      <td><input class="setSettings" v-model="settings.maxCO2" type="number" min="200" max="5000" step="10"></td>
    </tr>
  </table>
  <button type="button" v-on:click="whatSettings(settings)">Update Settings</button>
</form>

Мои данные в теге скрипта хранятся в локальных данных компонентов, а не в хранилище, вот так:

data: function() {
  return {
    settings: {
      maxTMP: "",
      minHUM: "",
      maxCO2: ""
    }
  }
}

Нет причин подвергать его мутации и фиксировать в хранилище, поскольку целью действия является просто отправка данных через почтовый запрос для получения API.

Мои методы длякомпонент выглядит так:

methods: {
  ...mapActions({
    setSettings: 'setSettings'
  }),
  whatSettings(settings){
    let foo = settings.maxTMP;
    let bar = settings.minHUM;
    let uhm = settings.maxCO2;
    console.log(foo);
    console.log(bar);
    console.log(uhm);
    this.setSettings(foo,bar,uhm)

  }
},

И это действие из магазина записывается так:

setSettings(foo,bar,uhm) {
  console.log("Set these settings");
  console.log(foo);
  console.log(bar);
  console.log(uhm);
},

Пожалуйста, прости все console.log ().У меня это так, потому что я пытался проверить различные комбинации вещей, чтобы выяснить, где это идет не так.Прямо сейчас, когда я нажимаю кнопку Update Settings, консоль правильно печатает whatSettings(), поэтому я знаю, что foo, bar, uhm - правильное значение, поскольку они передаются в действие setSettings().Проблема в журналах действий."Set these settings" и foo печатаются правильно, за ними следует один undefined, а не два.Так что я не совсем уверен, что происходит с bar & uhm.Когда я переставляю порядок, он всегда печатается первым.

Это проблема с несколькими аргументами, передаваемыми действию?В идеале мне бы хотелось, чтобы это выглядело прямо в теге кнопки для аккуратности, но это не сработало, поэтому я попытался решить проблему следующим образом:

v-on:click="this.setSettings(settings.maxTMP, settings.minHUM, settings.maxCO2)"

Спасибо за чтение, и я благодарен за помощь!

Answer 1

Что ж, после небольшого осмотра я нашел это, и это решило мою проблему: Публикация запроса Axios с несколькими параметрами в действии vuex

правильный тег кнопки:

<button type="button"
  v-on:click="setSettings({
    foo: settings.maxTMP,
    bar: settings.minHUM,
    uhm: settings.maxCO2
  })"
>Update Settings</button>

правильное действие хранилища vuex:

setSettings({commit}, {foo, bar, uhm}) {
  console.log("Set these settings");
  console.log(foo);
  console.log(bar);
  console.log(uhm);
},

Не совсем уверен, почему должен присутствовать {commit}, но в противном случае я просто получаю 3 undefined результатов в журнале.Но это работает сейчас!