feat: add random recipes localStorage

components/RandomRecipe.vue

@@ -16,11 +16,12 @@ const { random, randomRecipes } = useRandomRecipe(count)
     </button>
   </div>
 
-  <div v-show="randomRecipes.length > 0">
   <button cursor-pointer class="inline-flex inline-flex items-center justify-center rounded-md border-none bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline" @click="random">
     <div class="transition" hover="text-blue-500" i-ri-refresh-line mr-1 inline-flex />
     <div>随机一下</div>
   </button>
+
+  <div v-show="randomRecipes.length > 0">
     <div m="t-8" flex="~ col">
       <template v-for="recipe, i in randomRecipes" :key="i">
         <DishTag v-if="recipe" :dish="recipe" />

composables/recipe.ts

@@ -1,3 +1,5 @@
+import { useStorage } from '@vueuse/core'
+import { namespace } from '~/constants'
 import type { DbRecipeItem } from '~/utils/db'
 
 /**
@@ -5,7 +7,7 @@ import type { DbRecipeItem } from '~/utils/db'
  * @param total
  */
 export function useRandomRecipe(total: Ref<number>) {
-  const randomRecipes = ref<(DbRecipeItem | undefined)[]>([])
+  const randomRecipes = useStorage<(DbRecipeItem | undefined)[]>(`${namespace}:random:recipes`, [])
   async function random() {
     const length = await db.recipes.count()
     const randomArr = generateRandomArray(length, total.value)
@@ -19,6 +21,8 @@ export function useRandomRecipe(total: Ref<number>) {
   })
 
   onMounted(() => {
+    // 如果没有随机菜谱，就生成一次
+    if (randomRecipes.value.length <= 0)
       random()
   })