validate方法进行表单异步校验时，回调函数内部避免使用全局变量

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

问题代码：

save(){
        console.log(that.pos.indexName)
        console.log(that.pos.indexCode)
        this.$refs['from'].validate((valid) => {
          if (valid) {
            debugger
            that.pos.indexName = that.pos.indexName + "_" +that.pos.indexNum;
            that.pos.indexCode = that.pos.indexCode + String(that.pos.indexNum).padStart(4, '0');
            var pos = Object.assign({},that.pos);
            console.log(pos)
            this.$emit("loadLines",pos);
            this.closeDialog();
          }
        })
      },

情景再现：save方法中，第一行和第二行代码都有值，但是在回调方法内部，that.pos.indexName和that.pos.indexCode的确没有值。后来才得知由于validate方法是异步的，回调函数内部如果使用全局变量，一旦其他地方修改了全局变量，that.pos.indexName和that.pos.indexCode的值也会被修改。

没想到后面的closeDialog方法确实修改了全局变量that.pos.indexName和that.pos.indexCode，如下所示：

resetTemp() {
        this.pos.indexName = "";
        this.pos.indexCode = null;
      },
closeDialog() {
        this.resetTemp()
        this.$nextTick(() => {
          this.$refs['from'].clearValidate();
          this.dialogFormVisible = false;
        })
      }

正是由于closeDialog方法对全局变量that.pos.indexName和that.pos.indexCode进行了置空，导致我认为回调函数内没有值。

正确的做法是回调函数内使用局部变量，而不是全局变量，即使发生其他地方修改全局变量的情况，也不会影响到回调函数内的值。

save(){
        let indexName = that.pos.indexName
        let indexCode = that.pos.indexCode
        this.$refs['from'].validate((valid) => {
          if (valid) {
            that.pos.indexName = indexName + "_" +that.pos.indexNum;
            that.pos.indexCode = indexCode + String(that.pos.indexNum).padStart(4, '0');
            var pos = Object.assign({},that.pos);
            this.$emit("loadLines",pos);
            this.closeDialog();
          }
        })
      },

 

---

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。