여러 데이터 포인트를 하나의 액션에 넘기는 경우VUEX

여러 데이터 포인트를 하나의 액션에 넘기는 경우VUEX

다음과 같은 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: ""
    }
  }
}

post request를 통해 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)"

읽어주셔서 감사합니다.도와주셔서 감사합니다!

음, 좀 더 둘러본 후에 이것을 발견했고, 그것이 나의 문제를 해결했다.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로그가 생성됩니다.하지만 지금은 잘 돼!

언급URL : https://stackoverflow.com/questions/54855273/passing-multiple-data-points-to-an-action-vuex