vue.js - 显示我添加到矩阵的食谱

Question

此表单用于创建由 LOCAL STORAGE 存储的配方。在商店文件中，我在“状态”矩阵内的界面上显示一组食谱及其演示文稿，但是当我添加食谱时，我想在食谱矩阵“状态”中显示它。问题是配方由 localStorage 存储，但没有添加到配方矩阵“状态”中。并且在图片中显示了配方矩阵我该如何解决这个问题？

商店.js：

import Vue from 'vue'
import Vuex from 'vuex'
import image1 from '../assets/img/image4.jpg'
import image2 from '../assets/img/image2.jpg'
import image3 from '../assets/img/image3.jpg'
import image4 from '../assets/img/insta2.jpg'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state:{
        loadedRecipes:[
            {imageUrl:image3,
                id:'3' , title:'Homemade Burger',
                description:'Small plates, salads & sandwiches - an intimate setting with 12 indoor 
             seats plus patio seating..',
                ingredients: '25 Eges 30kg Water'
            },
            {imageUrl:image1,
                id:'1' , title:'Cake',
                description:'Small plates, salads & sandwiches - an intimate setting with 12 indoor 
                seats plus patio seating..',
                ingredients: '25 Eges 30kg Water'
            },
            {imageUrl:image4,
                id:'4' , title:'Salad',
                description:'Small plates, salads & sandwiches - an intimate setting with 12 indoor 
              seats plus patio seating..',
                ingredients: '25 Eges 30kg Water'
            },
            {imageUrl:image2,id:'2' ,
             title:'Kabseh',description:'Small plates, salads & sandwiches - an intimate setting with 
            12 indoor seats plus patio seating.',
             ingredients: '25 Eges 30kg Water'
            }
    
          ],
          user:{
              id:'nvdcjavdah',
              registeredRecipes:['jhvjhvmnbvhj']
          }
    },
    mutations:{
        // createRecipe(state,payload){
        //     state.loadedRecipes.push(payload)
        // }
    },
    actions:{
        // createRecipe(payload){
        //     const recipe = {
        //         title : payload.title,
        //         imageUrl: payload.imageUrl,
        //         description:payload.description,
        //         ingredients:payload.ingredients,
        //         date:payload.date,
        //         id:'hgxckjh'
        //     }
        //     console.log(recipe)
        // }
    },
    getters:{
        loadedRecipes(state){
            return state.loadedRecipes.sort((RecipeA,RecipeB)=>{
                return RecipeA.id >RecipeB.id
            })
        },
        featuredRecipes(state,getters){
            return getters.loadedRecipes.slice(0,5)
        },
        loadedRecipe(state){
            return (recipeId)=>{
                return state.loadedRecipes.find((recipe)=>{
                    return recipe.id === recipeId
                })
            }
        },
        addANewRecipe(state,newRecipe){         
                return state.loadedRecipes.push(newRecipe)            
        }
    }
})

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="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="ingredients"
                  label="Ingredients"
                  id="ingredients"
                  v-model="ingredients"
                  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 Redcipe
                </v-btn>
              </v-flex>
            </v-layout>
          </form>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      imageUrl: "",
      description: "",
      ingredients: "",
    };
  },
  computed: {
    formIsValid() {
      return (
        this.title !== "" &&
        this.description !== "" &&
        this.imageUrl !== "" &&
        this.ingredients != ""
      );
    }
  },
  methods: {
    onCreateRecipe() {
      if (!this.formIsValid) {
        return;
      }
      const recipeData = {
        title: this.title,
        description: this.description,
        imageUrl: this.imageUrl,
        ingredients: this.ingredients,
      };
      console.log(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>

标签： vue.jsvuetify.js

Answer 1

在 CreateRecipie.vue 中，您正在将数据写入 localStorage 而不是 Vuex 存储，并且存储未连接到 localStorage。如果您将数据写入存储，那么它应该可以正常工作。

一些需要更新的代码：

店铺：

mutations:{
        createRecipe(state,payload){
            Vue.set(state, 'loadedRecipes', [...loadedRecipes, payload])
            state.loadedRecipes.push(payload)
        }
    },

创建收据

onCreateRecipe() {
  if (!this.formIsValid) {
    return;
  }
  const recipeData = {
    title: this.title,
    description: this.description,
    imageUrl: this.imageUrl,
    ingredients: this.ingredients,
  };
  this.$store.commit('createRecipe', recipeData)
}