10、Vue 项目中食谱管理与状态管理的实现

Vue 项目中食谱管理与状态管理的实现

1. 食谱的添加与移除功能实现

在开发过程中，我们需要实现食谱在某一天的添加和移除功能。首先，实现搜索功能很简单，只需在 setup 标签中导入组件，然后将组件标签放置在模板中。由于搜索组件会触发事件，所以要添加监听器。

以下是相关代码示例：

<script setup lang="ts">
import { ref } from "vue";
import type { Ref } from "vue";
import type { RecipeResults } from "@/types/spoonacular";
import CalendarCard from "@/components/CalendarCard.vue";
import RecipeSearch from "@/components/RecipeSearch.vue";

interface Today {
  id: number;
  title: string;
  readyInMinutes: number;
}

interface Card {
  date: Date;
  content: string;
  today: Today[];
}

// …abbreviated
const insertRecipeOnDay = (recipe: RecipeResults): void => {
  if (dateSelected.value) {
    cards.value = cards.value.map((card) =>