Vue中实现避免按钮多次点击造成发送多次重复请求

store文件中设置一个变量，全局管理按钮的禁用和解除禁用，方便组件之间的通信

select.vue发送表单组件，表单没有填写完整时也要将按钮禁用解除

<Button type="primary" :disabled="this.$store.state.isDisable" @click="filterBtn('form')" icon="ios-search">筛选</Button>

methods: {
    
    
	filterBtn (name) {
    
    
       	  this.$store.state.isDisable = true
          this.$refs[name].validate((valid) => {
    
    
            if (valid) {
    
    
              this.$store.state.chartForm = this.requestData()         
              this.$Message.success(
                {
    
    
                  content:'发送请求成功!',
                  duration:3,
                }
              );
            } else {
    
    
              this.$Message.error('请求失败，请检查是否完整填写表单!');
              this.$store.state.isDisable = false  //解除按钮禁用
            }
          })
     }
 }

lineChart.vue获取数据显示曲线组件，不论获取到后端怎样的数据，都将按钮禁用解除，置为false

methods: {
    
    
        getData(){
    
    
          this.axios.post('/api/search/getgraph/predict/linechart', JSON.stringify(this.form),
              {
    
    headers:{
    
    'Content-Type':'application/json;charset=UTF-8'}}).then(result => {
    
    
            console.log("linePredictData:",result.data.data.coordinate)
           	........
            if (result.data.code === 200 && result.data.data.coordinate.length > 1) {
    
    
              .......
              this.flag = true
              this.$Message.success(
                {
    
    
                  content:'预测曲线更新完成',
                  duration: 8,
                  closable: true
                }
              );
              this.$store.state.isDisable = false   //解除按钮禁用
              this.myChart.clear()
              this.init()
            } else if(result.data.code === 200 && result.data.data.coordinate.length === 1){
    
    
              this.$Message.info({
    
    
                content: '此时间段内无数据，请重新选择',
                top:100,
                duration: 8,
                closable: true
              });
              this.$store.state.isDisable = false  //解除按钮禁用
              this.myChart.clear()
              this.init()
            }else if(result.data.data === null){
    
    
              this.flag = false
              this.$Message.error({
    
    
                content: '预测模块超时，请联系预测人员',
                duration: 8,
                closable: true
              });
              this.$store.state.isDisable = false  //解除按钮禁用
            }
          }).catch((error) => console.log(error))
        },
    }