在配方组件中创建警报

Question

这是一个运行站点的项目，它显示食谱并执行创建站点等多项操作，但我遇到了这个问题。 我有这个文件来创建一个我输入配方数据的配方，但是我如何在这个页面上创建一个警报，说创建一个配方成功。 我该如何解决问题？ 数据在这个文件中。 createRecipe.vue：

<template>
  <v-app>
    <v-container>
      <v-layout row>
        <v-flex xs12 sm6 offset-sm3>
          <h2 class="btn-style">Create Recipe</h2>
        </v-flex>
      </v-layout>
      <v-layout row>
        <v-flex xs12>
          <form @submit.prevent="onCreateRecipe">
              <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="id"
                  label="Id"
                  id="id"
                  v-model="id"
                  color="#43A047"
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="title"
                  label="Title"
                  id="title"
                  v-model="title"
                  color="#43A047"
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="imageUrl"
                  label="ImageUrl"
                  id="imageUrl"
                  v-model="imageUrl"
                  color="#43A047"
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <img :src="imageUrl" height="300px">
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="description"
                  label="Description"
                  id="description"
                  v-model="description"
                  color="#43A047"
                  multi-line
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="ingredientsName"
                  label="IngredientsName"
                  id="ingredientsName"
                  v-model="ingredientsName"
                  color="#43A047"
                  multi-line
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>

             <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="ingredientsQuantity"
                  label="IngredientsQuantity"
                  id="ingredientsQuantity"
                  v-model="ingredientsQuantity"
                  color="#43A047"
                  multi-line
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>

            <v-layout row>
              <v-flex xs12 sm6 offset-sm3>
                <v-btn
                  class="green darken-1 color"
                  :disabled="!formIsValid"
                  type="submit"
                >
                  Create Recipe
                </v-btn>
              </v-flex>
            </v-layout>
          </form>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      id:"",
      title: "",
      imageUrl: "",
      description: "",
      ingredientsName: "",
      ingredientsQuantity: "",
    };
  },
  computed: {
    formIsValid() {
      return (
        this.id !== ""&&
        this.title !== "" &&
        this.description !== "" &&
        this.imageUrl !== "" &&
        this.ingredientsName !== ""&&
        this.ingredientsQuantity !== ""
      );
    }
  },
  methods: {     
    onCreateRecipe() {
      if (!this.formIsValid) {
        return;
      }
      const recipeData = {
        id:this.id,
        title: this.title,
        description: this.description,
        imageUrl: this.imageUrl,
        ingredientsName:  this.ingredientsName,
        ingredientsQuantity: this.ingredientsQuantity
      };
    // Here we call the setter to put the Data inside it
      this.$store.commit('createRecipe', recipeData)
      const stringifiedData = JSON.stringify(recipeData);
      // console.log("S: ", stringifiedData);
      localStorage.setItem("recipe", stringifiedData);
      console.log("We got : ", JSON.parse(localStorage.getItem("recipe")));
    },
  }
};
</script>
<style scoped>
.btn-style {
  color: #43a047;
}
.color {
  color: #fafafa;
}
</style>

Answer 1

您需要使用异步操作而不是突变，您不能使用带有突变的异步操作。它应该是这样的：

this.$store.dispatch('createRecipe', recipeData).then(() => //alert('STH') or whatever you want to do after you add recipe)