[Vue.js] 형식의 다중 전송 방지

이 글은 Vue.js #4 Advent Calendar 2017 첫날의 글이다.

개요

본고는 다양한 형식의 전송 전략에 대해 연구를 진행하였다.js를 실시할 때 어떤 옵션이 있는지 소개해 주세요.

사건 수식자.once

Vue.js는 이벤트 처리 프로그램의 처리를 변화시키는 기능을 가지고 있다이벤트 수정자.

.stop

.prevent

.capture

.self

.once

이중 .once를 사용하면 다중송신을 방지할 수 있지 않나요?그렇게 생각할 수도 있지만 이건 못 써요.

<button @click.once="handleClick">
  Can click once
</button>

이 버튼은 글자의 뜻과 같이 한 번만 누를 수 있다..once 내부에서 무엇을 하고 있는지 말하려면 이벤트 처리 프로그램이 호출되면 처리 프로그램을 삭제합니다.

function createOnceHandler (handler, event, capture) {
  const _target = target // save current target element in closure
  return function onceHandler () {
    const res = handler.apply(null, arguments)
    if (res !== null) {
      remove(event, onceHandler, capture, _target)
    }
  }
}

정말 한 번만 누르고 싶으면.once 돼요.그러나form의submit 단추는 제어가 필요합니다. 예를 들어 검증 오류가 발생하면 한 번 발송을 취소하고 비활성화하며 사용자가 입력값을 수정한 후에 활성화해서 눌러야 합니다.따라서 .onceform의submit 단추에 사용할 수 없습니다.

양식 구성 요소 상태 유지

아래와 같이 창 구성 요소에 처리 중인 로고가 있으면 (여기는 this.processing 처리 중 다른 처리를 중단할 수 없습니다.

<template>
  <div id="app">
    <form action="">
      <input
        type="submit"
        :disabled="processing"
        @click.prevent="submit"
      />
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      processing: false,
    }
  },
  methods: {
    submit() {
      if (this.processing) return;
      this.processing = true;
      this.doSomething()
        .then(() => {
          this.processing = false;
        });
    },
    doSomething() {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log(`Submitted on ${new Date()}`);
          resolve();
        }, 1000);
      });
    },
  }
}
</script>

여기서setTimeout() 사용하면 한 번 누르면 1초를 더 누를 수 없습니다.누르지 않을 때 버튼을 설정한 disabled 속성이 친밀합니다.

많이 보내지 않는 단추 구성 요소

여러 폼 구성 요소에서 다중 발송 대책을 취할 때 처리를 공통화하려고 합니다.여기에는 Mixin 과 같은 몇 가지 옵션이 있습니다.개인적으로 추천하는 것은'다중으로 보내지 않는 단추 구성 요소'제작입니다.
우선, 다음 button 요소의 확장 구성 요소를 정의합니다.

<template>
  <button :disabled="disabled || processing" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
  export default {
    name: 'single-submit-button',
    props: {
      // A function which returns Promise.
      onclick: {
        type: Function,
        required: true,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        processing: false,
      };
    },
    methods: {
      handleClick(event) {
        if (this.processing) return;
        this.processing = true;
        this.onclick(event)
          .then(() => {
            this.processing = false;
          });
      },
    },
  };
</script>

이용 방면은 다음과 같다.요점은 :onclick 에 프로미스를 되돌려 주는 방법의 이름을 쓰는 것이다.

<template>
  <div id="app">
    <form action="">
      <single-submit-button :onclick="doSomething" type="submit">
        Click me multiple times!
      </single-submit-button>
    </form>
  </div>
</template>

<script>
  import SingleSubmitButton from './SingleSubmitButton';

  export default {
    components: {
      SingleSubmitButton,
    },
    methods: {
      doSomething(event) {
        event.preventDefault();
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log(`Submitted at ${new Date()}`);
            resolve();
          }, 1000);
        });
      },
    },
  };
</script>

<single-submit-button type="submit">이렇게 쓰면 이 type 속성은 내부의button에 의해 계승됩니다.따라서 정적 속성은 정상적으로 쓸 수 있다.disabled 속성은 동적 리셋 값이 있을 수 있기 때문에props로 정의됩니다.

총결산

Vue.js에서 재사용성 있는 기능을 구성 요소에 잘라내면 잘 쓸 수 있을 것 같습니다.
내일은 takayam씨의'넥스트가 실제 안건에서 개발할 때 만든 나의 플러그인'입니다. ※URL이 결정되면 링크를 만들 예정입니다.