在页面中显示食谱

Question

这是一个项目，为了显示菜谱，并对这些菜谱进行许多操作，如添加、删除和修改，但是这里我想显示菜谱并查看菜谱我写了以下代码，但菜谱是从未在浏览器中显示。 我该如何解决这个问题？

此文件用于查看食谱。 食谱.vue：

<template>
  <v-container>
    <v-layout
      row
      wrap
      v-for="recipe in Recipes"
      :key="recipe.id"
      class="mb-2"
    >
      <v-flex xs12 sm10 md8 offset-sm1 offset-md2>
        <v-card class="grey lighten-4 pl-3 ">
          <v-container fluid>
            <v-layout row>
              <v-flex xs5 sm4 md3>
                <v-img height="180px" :src="recipe.imageUrl"></v-img>
              </v-flex>
              <v-flex xs7 sm8 md9>
                <v-card-title primary-title>
                  <div>
                    <h5 class="color mb-0">{{ recipe.title }}</h5>
                    <div>
                      {{ recipe.description }}
                    </div>
                  </div>
                </v-card-title>
                <v-card-actions>
                  <v-flex>
                    <v-btn
                      text
                      left
                      :to="'/recipe/' + recipe.id"
                      class="green darken-1  btn-style"
                    >
                      View Recipe
                    </v-btn>
                  </v-flex>
                  <v-flex xs5 sm4 md2>
                    <v-btn class="deleteColorIcon">
                      <v-icon
                        left
                        class=" pl-4"
                        @click="$store.commit('delete_recipe', recipe.id)"
                      >
                        mdi-delete
                      </v-icon>
                      <!-- </v-btn> -->
                    </v-btn>
                  </v-flex>
                </v-card-actions>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>    
<script>
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'    
export default {
  actions: {
  },
  computed: {
    ...mapGetters([
      //Here we put Getter
      'loadedRecipes',
    ]),
    Recipes() {
      console.log('Hi I am i Recipe Component')
      return this.$store.dispatch('loadedRecipes')
    }
  },
  methods: {
    ...mapActions([
      'createRecipe'
    ])
  },
    createRecipe() {
      console.log('Hi I am in Create Recipe Component')
       this.$store.dispatch('createRecipe');
    },
};
</script>

<style scoped>
.color {
  color: #43a047;
}
.btn-style {
  color: #fafafa;
}
.deleteColorIcon {
  color: #e53935;
}
</style>

这个文件用于创建我们想在其他组件中使用的几个函数。 store.js：

import image1 from "../../assets/img/image1.jpg";
import image2 from "../../assets/img/image2.jpg";
import image3 from "../../assets/img/image3.jpg";
import image4 from "../../assets/img/image4.jpg";  
const state = {
  loadedingredients: [
    { id: "1", Name: "Sugar", Quantity: "5kg" },
    { id: "2", Name: "Sugar", Quantity: "5kg" },
    { id: "3", Name: "Sugar", Quantity: "5kg" },
  ],
  loadedRecipes: [
    {
      imageUrl: image3,
      id: "3",
      title: "Homemade Burger",
      description:
        "Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio 
              seating..",
      // loadedingredients
    },
    {
      imageUrl: image1,
      id: "1",
      title: "Cake",
      description:
        "Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio 
            seating..",
      // loadedingredients
    },
    {
      imageUrl: image4,
      id: "4",
      title: "Salad",
      description:
        "Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio 
           seating..",
      // loadedingredients
    },
    {
      imageUrl: image2,
      id: "2",
      title: "Kabseh",
      description:
        "Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio 
      seating.",
      //  loadedingredients
    },
  ],
  user: [{ name: "Hiba", email: "Hiba69@gmail.com", password: "123442321325" }],
  loading: false,
};    
const mutations= {
    createRecipe(state, payload) {
        // Vue.set(state, 'loadedRecipes', [...state.loadedRecipes, payload])
        // console.log('Recipe to adad recipe.js',payload)
        state.loadedRecipes.push(payload.recipeData);
      },
      createIngredients(state, payload) {
        // Vue.set(state, 'loadedRecipes', [...state.loadedRecipes, payload])
        state.loadedingredients.push(payload.ingredientData);
      },
      delete_recipe(state, id) {
        let index = state.loadedRecipes.findIndex((recipe) => recipe.id == id);
        state.loadedRecipes.splice(index, 1);
        console.log("Deleted Successfully");
      },
      delete_ingredient(state, id) {
        let index = state.loadedingredients.findIndex(
          (ingredient) => ingredient.id == id
        );
        state.loadedingredients.splice(index, 1);
        console.log("Deleted Successfully");
      },
      updateRecipe(state, payload) {
        const recipe = state.loadedRecipes.find((recipe) => {
          return recipe.id == payload.id;
        });
        if (payload.title) {
          recipe.title = payload.title;
        }
        if (payload.description) {
          recipe.description = payload.description;
        }
      },
      updateingredient(state,payload) {
        const ingredient = state.loadedingredients.find((ingredient)=>{
          return ingredient.id == payload.id;
        });
        if(payload.ingredientsQuantity){
          ingredient.ingredientsQuantity=payload.ingredientsQuantity
        }
      },
      setLoading(state, payload) {
        state.loading = payload;
      }
}
const actions = {
    createRecipe:({commit},payload)=>{
        commit('createRecipe',payload)
    },
    delete_recipe:({commit})=>{
        commit('delete_recipe')
    },
    updateRecipeData({ commit }, payload) {
        // commit('setLoading',true)
        const updateObj = {};
        if (payload.title) {
          updateObj.title == payload.title;
        }
        if (payload.description) {
          updateObj.description == payload.description;
        }
        commit("updateRecipe", payload);
        localStorage.setItem("updateRecipe", this.loadedRecipes);
      },
      updateIngredientData({ commit }, payload) {
        // commit('setLoading',true)
        const updateObj = {};
        if (payload.ingredientsQuantity) {
          updateObj.ingredientsQuantity == payload.ingredientsQuantity;
        }
        commit("updateingredient", payload);
        localStorage.setItem("updateingredient", this.loadedingredients);
      }
};    
const getters = {
    loadedRecipes: (state) => {
        return state.loadedRecipes
          .sort((RecipeA, RecipeB) => {
            return RecipeA.id > RecipeB.id;
          })
          .map((aRec) => {
            aRec["ingredients"] = [...state.loadedingredients];
            return aRec;
          });
      },
      featuredRecipes: (getters) => {
        return getters.loadedRecipes.slice(0, 5);
      },
      loadedRecipe: (state) => {
        return (recipeId) => {
          return state.loadedRecipes.find((recipe) => {
            return recipe.id === recipeId;
          });
        };
      }
};    
export default{
    state,
    mutations,
    actions,
    getters
}

Answer 1

我看到的第一件事是，当您从商店加载元素时，它应该是 this.$store.state.loadedRecipes 而不是 this.$store.dispatch("loadedRecipes")。

我还认为您可能在 Vue 实例中缺少 store，或者在创建实际商店时缺少。 商店应该像这样在 app.js、main.js 或 index.js 中像这样导入：

import store from './store'

new Vue({
 store,
 ...
})

如果您的商店文件夹中没有 index.js，您可能还没有创建实际的商店：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

阅读更多here 关于 Vuex 商店的信息。

这是您的代码的working demo。

请注意，我只更改了查看商店中商品所需的内容。可能还有其他错误。