無法在 function 中訪問 vuex state

Question

我正在開發一個 Laravel+Vue 應用程序。 我正在使用 Vuex 進行 state 管理。 我正在嘗試驗證我的表格。 一切進展順利，但我遇到了一個問題。問題是當我第一次嘗試提交表單時， validationError state 返回null （默認 Z9ED39E2EA931586B6A985A6942EF573E 未更新）。 當我再次提交表單（檢查驗證）時，它會在控制台中記錄validationError object。 任何知道為什么第一次提交時validationErrors state 是null。

注意：當我嘗試訪問模板內的validationErrors state 時，它工作正常

store.js

import Vue from "vue";
import Vuex from "vuex";
import categories from "./modules/categories";

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        categories
    }
});

類別.js

import axios from "axios";

const state = {
    categories: [],
    validation_errors: null
};

const getters = {
    allCategories: state => state.categories,
    validationErrors: state => state.validation_errors
};

const actions = {
    async fetchCategories({ commit }) {
        const response = await axios.get("/api/categories");
        commit("setCategories", response.data);
    },

    async addCategory({ commit }, { name, sku, unit, image, details }) {
        try {
            const formData = new FormData();
            formData.append("name", name);
            formData.append("sku", sku);
            formData.append("unit", unit);
            formData.append("image", image);
            formData.append("details", details);

            const res = await axios.post("/api/categories/add", formData);

            commit("newCategory", res.data);
        } catch (err) {
            const errors = err.response.data.errors;
            commit("formErrors", errors);
        }
    }
};

const mutations = {
    setCategories: (state, categories) => (state.categories = categories),
    newCategory: (state, category) => state.categories.unshift(category),
    formErrors: (state, errors) => (state.validation_errors = errors)
};

export default {
    state,
    getters,
    actions,
    mutations
};

AddCategoryForm.vue

<template>
  <form role="form" v-on:submit.prevent="handleSubmit">
        <label for="name">Category Name</label>
        <input
          type="text"
          class="form-control"
          name="name"
          id="name"
          placeholder="Category Name"
          v-model="category.name"
        />

       <button type="submit" class="btn btn-primary">Add Category</button>


    <!-- NOTE: I can access 'validationErrors' state here in the template -->


  </form>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {

  data() {
    return {

      category: {
        name: ""
      }
    };
  },
  computed: {
    ...mapGetters(["validationErrors"])
  },
  methods: {
    ...mapActions(["addCategory"]),

    handleSubmit() {
      this.addCategory(this.category);

      console.log(this.validationErrors); // returns `null` on first submit
    }
  }
};
</script>

Answer 1

操作addCategory是異步的，因此您應該在檢查this.validationErrors之前等待它

 async handleSubmit() {
      await this.addCategory(this.category);

      console.log(this.validationErrors); // returns `null` on first submit
    }

或者

 handleSubmit() {
      this.addCategory(this.category),then(() => {
         console.log(this.validationErrors); // returns `null` on first submit
      });
    }