将多个数据点传递给一个动作？ VUEX答案

【问题标题】：Passing multiple data points to an action? VUEX将多个数据点传递给一个动作？ VUEX
【发布时间】：2019-07-18 05:05:00
【问题描述】：

所以我有一个收集 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)"

感谢阅读，感谢您的帮助！

【问题讨论】：

标签： forms vue.js vuex

【解决方案1】：

好吧，在环顾四周后，我发现了这个并解决了我的问题：Axios post request with multiple parameters in vuex action

正确的按钮标签：

<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 结果。但是现在可以了！

【讨论】：