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>

我在script标签中的数据存储在组件本地数据中，而不是存储在本地数据中，例如：

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到底发生了什么。当我重新排列顺序时，它总是第一个被打印。

将多个参数传递给操作是否存在问题？理想情况下，我希望它看起来像直接在button标记中看起来一样整洁，但这没用，所以我尝试像这样拍摄问题：

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

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

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

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

1 个答案: