문제

양식의 입력을 vuex 상태에 저장하고 싶다고 가정해 보겠습니다.

아마도 vuex를 처음 사용하는 사람은 다음과 같이 시도할 것입니다.

<input id="name" name="name" type="text" v-model="$store.state.user.name">

이것을 시도하면 다음을 볼 수 있습니다.

작동하지 않습니다

작동하더라도 vuex의 purpose에 완전히 반대합니다. 즉, 돌연변이에 의해 만들어지지 않고는 상태가 변경되지 않습니다.

무언가를 변경하려면 항상 돌연변이를 보내십시오.

이제 이를 염두에 두고 vuex 문서를 살펴보면 다음을 찾을 수 있습니다.

[...] An alternative approach is using a two-way computed property with a setter:

<input v-model="message">

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

click here to see.

v-모델을 사용하여 변경할 수 있지만 상태를 변경하려면 getter 및 setter로 계산된 속성을 등록해야 합니다.

공장?
공장.

그러나 양식이 있다고 가정하면 모든 입력에 게터와 세터를 만들어야 합니다. 이것은 작동하지만 실용적이지 않습니다.

내 생각에 이를 수행하는 가장 좋은 방법은 클린 코드의 원칙을 사용하여 코드를 작성하는 것입니다.

export function mapFields(options) {
  const object = {};
  for (let x = 0; x < options.fields.length; x++) {
    const field = [options.fields[x]];
    object[field] = {
      get() {
        return this.$store.state[options.base][field];
      },
      set(value) {
        this.$store.commit(options.mutation, { [field]: value });
      }
    };
  }
  return object;
}

여기서 mapField는 모든 필드를 매핑하고 양식을 처리하는 함수입니다. 옵션은 매핑하려는 필드인 필드와 참조할 기반이 있는 개체입니다.

결국 getter와 setter만 우리에게 반환할 것입니다. 이전과 크게 다르지는 않지만 훨씬 적은 코드를 사용합니다.

편집: 사용 방법을 보여주는 것을 잊었으므로 여기 있습니다.

다음과 같이 내 userForm.vue에서 가져올 수 있도록 일부 helper.js에 넣을 것입니다.

<script>
import { mapFields } from "@/helpers.js"

export default {
  computed: {
    ...mapFields({
    fields: ["name", "email", "street", "zipcode"],
    base: "user",
    mutation: "UPDATE_USER"
    }),
...

여기에서 내 첫 번째 게시물을 즐겼기를 바랍니다. 질문이 있으면 댓글을 달아주세요! 😎

새해 복 많이 받으세요