Vue는 짧은 시간 동안 연속으로 클릭한 후 여러 번 요청이 발생하는 것을 방지합니다.

제출 버튼을 연속으로 누르면 데이터 제출이 중복되어 오류가 발생할 수 있습니다. 해결 방법은disabled로 클릭을 제한할 수 있습니다. 체험이 좋지 않은 것 같습니다. 다음 방법을 공유해 드리겠습니다.

<el-button @click="throttle()"> </el-button> 
export default {
 data(){
  return {
   lastTime:0 // 0 
  }
 }
}

methods:{
 throttle(){
  // 
  let now = new Date().valueOf();
  // 
  if(this.lastTime == 0){
   console.log(' ');
   this.lastTime = now;
  }else{
   if((now-this.lastTime) > 2000){
    // ，2000 2 ， 
    this.lastTime = now;
    console.log(' 2 ， ');
    // 
   }else{
    console.log(' ');
   }
  }
  },
}

이런 방법은 좋지만 요청 시간 초과가 발생하면 처리하기가 쉽지 않을 수도 있습니다 (네트워크 원인, 데이터가 너무 큽니다).백엔드를 통해res를 되돌려줄지 여부를 고려합니다.방법은 아직 향상되어야 한다!참고용~
보충 지식: vuex에서module가 너무 많을 때 하나하나 도입해야 하는 문제 해결
프로젝트 개발에서 vuex를 사용하면 프로젝트가 너무 크면 vuex는 모듈화되어야 하지만 모듈이 너무 많으면store의 index가 필요합니다.js에서 하나하나 도입하는 것은 너무 번거롭다. 그래서 웹팩에서 설정이 나왔는데 이 문제를 해결할 수 있다. 여러 번 도입할 필요가 없다. 게으른 암 환자의 복음,
다음은 솔루션

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
 const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
 const value = modulesFiles(modulePath)
 modules[moduleName] = value.default
 return modules
}, {})
const store = new Vuex.Store({
 modules,
 getters
})
export default store

이것을 설정하면 모듈을 하나하나 도입할 필요가 없다.
위의 Vue는 짧은 시간 동안 연속으로 클릭한 후 여러 번 요청을 트리거하는 것을 방지하는 동작이 바로 여러분에게 공유된 모든 내용입니다. 여러분에게 참고가 될 수 있기를 바라며 많은 응원을 부탁드립니다.