Vue.js 在页面中显示配方

这是一个项目，目的是显示配方并对这些配方执行许多操作，如添加、删除和修改，但这里我想显示配方并查看我编写的以下代码中的配方，但这些配方从未在浏览器中显示。 我怎样才能解决这个问题

此文件用于查看配方。 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>

---

我能看到的第一件事是，当您从存储加载元素时，它应该是

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
})

了解有关Vuex中商店的更多信息

这是你的一段代码

请注意，我只更改了查看商店中物品所需的时间。可能还有其他bug

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

Vue.use(Vuex)

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