refactor: add useRecipe

src/components/ChooseFood.vue

@@ -9,50 +9,15 @@ import { useRecipeStore } from '~/stores/recipe'
 
 import { useInvisibleElement } from '~/composables/helper'
 import { useEmojiAnimation } from '~/composables/animation'
+import { useRecipe } from '~/composables/recipe'
 
 const recipe = ref<Recipe>(recipeData as Recipe)
 
 const rStore = useRecipeStore()
-const { curMode, curTool } = storeToRefs(rStore)
+const { curTool } = storeToRefs(rStore)
 const curStuff = computed(() => rStore.selectedStuff)
 
-// 默认严格模式
+const { displayedRecipe, clickTool } = useRecipe(recipe)
-const displayedRecipe = computed(() => {
-  if (curMode.value === 'strict') {
-    return recipe.value.filter((item) => {
-      const stuffFlag = curStuff.value.every(stuff => item.stuff.includes(stuff))
-      const toolFlag = item.tools?.includes(curTool.value)
-      return curTool.value ? stuffFlag && toolFlag : stuffFlag
-    })
-  }
-  else if (curMode.value === 'loose') {
-    return recipe.value.filter((item) => {
-      const stuffFlag = curStuff.value.some(stuff => item.stuff.includes(stuff))
-      const toolFlag = item.tools?.includes(curTool.value)
-
-      // 同时存在 厨具和材料，则同时判断
-      if (curTool.value && curStuff.value.length) {
-        return stuffFlag && toolFlag
-      }
-      else {
-        if (curStuff.value.length)
-          return stuffFlag
-        else if (curTool.value)
-          return toolFlag
-
-        return false
-      }
-    })
-  }
-  // survival
-  else {
-    return recipe.value.filter((item) => {
-      const stuffFlag = item.stuff.every(stuff => curStuff.value.includes(stuff))
-      const toolFlag = item.tools?.includes(curTool.value)
-      return curTool.value ? stuffFlag && toolFlag : stuffFlag
-    })
-  }
-})
 
 const recipeBtn = ref<HTMLButtonElement>()
 const { playAnimation } = useEmojiAnimation(recipeBtn)
@@ -77,31 +42,9 @@ const toggleStuff = (item: StuffItem, category = '', e?: Event) => {
   })
 }
 
-/**
- * toggle tool
- * @param item
- */
-const clickTool = (item: StuffItem) => {
-  const value = item.name
-  rStore.toggleTools(value)
-
-  gtm?.trackEvent({
-    event: 'click',
-    category: `tool_${value}`,
-    action: 'click_tool',
-    label: '工具',
-  })
-  gtm?.trackEvent({
-    event: 'click_tool',
-    action: item.name,
-  })
-}
-
 const recipePanel = ref()
 const { isVisible, show } = useInvisibleElement(recipePanel)
 
-
-
 function generateRandomRecipe() {
   return recipe.value[Math.floor(Math.random() * recipe.value.length)]
 }
@@ -238,10 +181,9 @@ const randomRecipe = ref<RecipeItem>(generateRandomRecipe())
             反馈新的菜谱！
           </span>
         </span>
-
       </Transition>
 
-      <hr m="y-2" />
+      <hr m="y-2">
 
       <div class="inline-flex justify-center items-center">
         今天吃什么？<div class="transition" hover="text-blue-500" inline-block cursor-pointer i-ri-refresh-line @click="randomRecipe = generateRandomRecipe()" />

src/composables/recipe.ts

@@ -0,0 +1,78 @@
+import type { Ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useGtm } from '@gtm-support/vue-gtm'
+import type { Recipe } from '~/types'
+
+import { useRecipeStore } from '~/stores/recipe'
+import type { StuffItem } from '~/data/food'
+
+export function useRecipe(recipe: Ref<Recipe>) {
+  const gtm = useGtm()
+
+  const rStore = useRecipeStore()
+  const { curMode, curTool } = storeToRefs(rStore)
+  const curStuff = computed(() => rStore.selectedStuff)
+
+  // 默认严格模式
+  const displayedRecipe = computed(() => {
+    if (curMode.value === 'strict') {
+      return recipe.value.filter((item) => {
+        const stuffFlag = curStuff.value.every(stuff => item.stuff.includes(stuff))
+        const toolFlag = item.tools?.includes(curTool.value)
+        return curTool.value ? stuffFlag && toolFlag : stuffFlag
+      })
+    }
+    else if (curMode.value === 'loose') {
+      return recipe.value.filter((item) => {
+        const stuffFlag = curStuff.value.some(stuff => item.stuff.includes(stuff))
+        const toolFlag = item.tools?.includes(curTool.value)
+
+        // 同时存在 厨具和材料，则同时判断
+        if (curTool.value && curStuff.value.length) {
+          return stuffFlag && toolFlag
+        }
+        else {
+          if (curStuff.value.length)
+            return stuffFlag
+          else if (curTool.value)
+            return toolFlag
+
+          return false
+        }
+      })
+    }
+    // survival
+    else {
+      return recipe.value.filter((item) => {
+        const stuffFlag = item.stuff.every(stuff => curStuff.value.includes(stuff))
+        const toolFlag = item.tools?.includes(curTool.value)
+        return curTool.value ? stuffFlag && toolFlag : stuffFlag
+      })
+    }
+  })
+
+  /**
+   * toggle tool
+   * @param item
+   */
+  const clickTool = (item: StuffItem) => {
+    const value = item.name
+    rStore.toggleTools(value)
+
+    gtm?.trackEvent({
+      event: 'click',
+      category: `tool_${value}`,
+      action: 'click_tool',
+      label: '工具',
+    })
+    gtm?.trackEvent({
+      event: 'click_tool',
+      action: item.name,
+    })
+  }
+
+  return {
+    displayedRecipe,
+    clickTool,
+  }
+}