Laravel+Vue项目首次提交表单时Vuex validationErrors状态为null的问题

嘿，我懂你碰到的这个问题！这其实是异步操作的时序问题在搞鬼。咱们来拆解一下：

你调用的addCategory是个异步action，里面包含axios的POST请求。当你在handleSubmit里执行this.addCategory(this.category)之后，立刻就去console.log(this.validationErrors)，这时候axios的请求还在后台跑呢（不管是成功还是失败），Vuex里的formErrors mutation还没触发，所以你拿到的还是初始的null值。等第二次提交时，第一次的错误已经被更新到state里了，自然就能打印出来。

而模板里能正常显示错误，是因为Vue的响应式系统会自动监听state的变化，一旦mutation更新了validation_errors，模板会立刻重新渲染，所以能拿到最新状态。

几种靠谱的解决办法 #

方法1：让handleSubmit等待异步action完成 #

既然addCategory是async函数，咱们直接在handleSubmit里用await等它跑完，这样console.log的时候状态已经更新了：

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      category: { name: "" }
    };
  },
  computed: {
    ...mapGetters(["validationErrors"])
  },
  methods: {
    ...mapActions(["addCategory"]),
    async handleSubmit() {
      await this.addCategory(this.category); // 等异步请求结束
      console.log(this.validationErrors); // 现在能拿到最新的错误啦
    }
  }
};
</script>

方法2：用watch监听错误状态的变化 #

如果需要错误状态一更新就自动执行逻辑（比如打印），可以用Vue的watch选项：

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      category: { name: "" }
    };
  },
  computed: {
    ...mapGetters(["validationErrors"])
  },
  watch: {
    validationErrors(newErrors) {
      if (newErrors) { // 只在有错误的时候打印
        console.log("最新验证错误：", newErrors);
      }
    }
  },
  methods: {
    ...mapActions(["addCategory"]),
    handleSubmit() {
      this.addCategory(this.category);
    }
  }
};
</script>

方法3：利用Promise的then回调 #

因为async函数会返回Promise，也可以用then来处理后续逻辑：

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      category: { name: "" }
    };
  },
  computed: {
    ...mapGetters(["validationErrors"])
  },
  methods: {
    ...mapActions(["addCategory"]),
    handleSubmit() {
      this.addCategory(this.category)
        .then(() => {
          console.log(this.validationErrors);
        });
    }
  }
};
</script>

选哪种方法看你的需求就行，第一种最直接，适合你现在的场景～

内容的提问来源于stack exchange，提问作者MUHAMMAD Siyab