feat: dynamic import recipe.json

components/RandomRecipe.vue

@@ -22,7 +22,9 @@ const { random, randomRecipes } = useRandomRecipe(count)
       <div>随机一下</div>
     </button>
     <div m="t-8" flex="~ col">
-      <DishTag v-for="recipe, i in randomRecipes" :key="i" :dish="recipe" />
+      <template v-for="recipe, i in randomRecipes" :key="i">
+        <DishTag v-if="recipe" :dish="recipe" />
+      </template>
     </div>
   </div>
 </template>

components/tags/DishTag.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+import type { DbRecipeItem } from 'utils/db'
 import { tools } from '~/data/food'
 import type { RecipeItem } from '~/types'
 import { getEmojisFromStuff } from '~/utils'
 
 const props = defineProps<{
-  dish: RecipeItem
+  dish: RecipeItem | DbRecipeItem
 }>()
 
 const gtm = useGtm()

composables/db.ts

@@ -5,13 +5,11 @@ export function useIndexedDB() {
   const dbUpdated = useStorage(`${namespace}:lastDbUpdated`, lastDbUpdated)
 
   return {
-    // db,
-    // initDb,
     init: async () => {
       const count = await db.recipes.count()
       if (!count || dbUpdated.value !== lastDbUpdated) {
+        await initDb()
         dbUpdated.value = lastDbUpdated
-        initDb()
       }
     },
   }

composables/recipe.ts

@@ -1,5 +1,4 @@
-import recipeData from '~/data/recipe.json'
+import type { DbRecipeItem } from 'utils/db'
-import type { RecipeItem, Recipes } from '~/types'
 
 /**
  * 随机几道菜
@@ -7,9 +6,13 @@ import type { RecipeItem, Recipes } from '~/types'
  * @returns
  */
 export function useRandomRecipe(total: Ref<number>) {
-  const randomRecipes = ref<RecipeItem[]>([])
+  const randomRecipes = ref<(DbRecipeItem | undefined)[]>([])
-  function random() {
+  async function random() {
-    randomRecipes.value = generateRandomRecipe(recipeData as Recipes, total.value)
+    const length = await db.recipes.count()
+    const randomArr = generateRandomArray(length, total.value)
+    const result = await db.recipes.bulkGet(randomArr)
+    if (result)
+      randomRecipes.value = result.filter(item => !!item)
   }
 
   watch(total, () => {

pages/random.vue

@@ -4,7 +4,7 @@
       今天吃什么
     </CommonHeader>
     <div flex flex-grow flex-col items-center justify-center>
-      <RandomRecipe mt-8 />
+      <RandomRecipe />
     </div>
   </div>
 </template>

utils/db.ts

@@ -1,7 +1,6 @@
 import type { Table } from 'dexie'
 import Dexie from 'dexie'
 
-import recipeData from '../data/recipe.json'
 import type { RecipeItem } from '~/types'
 
 export interface DbRecipeItem extends RecipeItem {
@@ -21,8 +20,10 @@ export class MySubClassedDexie extends Dexie {
 
 export const db = new MySubClassedDexie()
 
-export function initDb() {
+export async function initDb() {
-  db.recipes.bulkPut(
+  const { default: recipeData } = await import('../data/recipe.json')
+
+  return db.recipes.bulkPut(
     (recipeData as RecipeItem[]).map((item, i) => ({
       id: i,
       ...item,

utils/random.ts

@@ -1,19 +1,17 @@
-import type { RecipeItem, Recipes } from '../types'
-
 /**
- * 生成随机菜谱，默认一道
+ * 生成随机数组
  * @param recipes
  * @returns
  */
-export function generateRandomRecipe(recipes: Recipes, total = 1) {
+export function generateRandomArray(length: number, total = 1) {
-  const randomRecipes: RecipeItem[] = []
+  const randomArr: number[] = []
   for (let i = 0; i < total; i++) {
-    const randomIndex = Math.floor(Math.random() * recipes.length)
+    const randomIndex = Math.floor(Math.random() * length)
-    if (randomRecipes.includes(recipes[randomIndex])) {
+    if (randomArr.includes(randomIndex)) {
       i--
       continue
     }
-    randomRecipes.push(recipes[randomIndex])
+    randomArr.push(randomIndex)
   }
-  return randomRecipes
+  return randomArr
 }