Display Recipes in the Page - vue.js

Question

This is a project in order to display recipes and perform many operations on these recipes such as adding, deleting and modifying, but here I want to display the recipes and to view the recipes I wrote the following code, but the recipes were never displayed in the browser.
How can I solve this problem?
This file is for viewing recipes.
Recipes.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>
And this file is for creating several functions that we want to use in other components.
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

First thing I can see is that it should be this.$store.state.loadedRecipes instead of this.$store.dispatch("loadedRecipes") when you load the elements from the store.
I also think you might be missing store inside the Vue instance and or the creation of the actual store.
The store should be imported like this in app.js, main.js or index.js like so:
import store from './store'
new Vue({
store,
...
})
If you don't have a index.js inside your store folder you probably haven't created the actual store:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state,
mutations,
actions,
getters
})
Read more here about the store in Vuex.
Here is a working demo of your code.
Note that I have only changed the necessary to view the items in the store. There might be other bugs.