Dexie.js 中嵌套对象更新的注意事项

在使用 Dexie.js 进行 IndexedDB 操作时，处理嵌套对象的更新需要特别注意事务管理和响应式编程的交互问题。本文将通过一个实际案例，分析在 Svelte 5 环境中使用 Dexie.js 时可能遇到的更新失效问题及其解决方案。

问题背景

在开发一个健身追踪应用时，我们使用 Dexie.js 作为 IndexedDB 的封装库。数据结构中包含多层嵌套：

{
  id: number,
  workout_exercises: [
    {
      id: number,
      exercise: { id: number, name: string },
      sets: [
        { id: number, reps: number, weight: number }
      ]
    }
  ]
}

主要操作包括向特定训练动作(workout_exercise)中添加新的组(set)。初始实现中，更新操作有时会失效，新添加的组不会持久化到数据库中。

初始实现分析

最初的更新逻辑是这样的：

async function addExerciseSet(id, workoutExerciseId) {
  const workout = await db.workouts.get(id);
  const updatedExercises = workout.workout_exercises.map(we => {
    if (we.id === workoutExerciseId) {
      return {
        ...we,
        sets: [...we.sets, newSet]
      };
    }
    return we;
  });
  
  await db.workouts.update(id, {
    workout_exercises: updatedExercises
  });
}

表面上看逻辑没有问题，但实际运行时会出现更新不生效的情况。经过排查，发现问题出在 Svelte 的响应式系统与 Dexie 操作的交互上。

根本原因

在 Svelte 组件中，使用了 $effect 自动触发更新：

$effect(() => {
  workoutsStore.updateExerciseSet(workoutId, workoutExerciseId, {
    ...set,
    weight,
    reps
  });
});

这种实现存在两个问题：

1. 没有使用事务包装相关的 get 和 update 操作
2. $effect 的自动触发可能导致竞态条件

当多个状态变化快速连续发生时，没有事务保护的更新操作可能会相互覆盖，导致部分更新丢失。

解决方案

正确的做法是将相关操作放入事务中：

async function addExerciseSet(id, workoutExerciseId) {
  await db.transaction('rw', db.workouts, async () => {
    const workout = await db.workouts.get(id);
    const updatedExercises = workout.workout_exercises.map(we => {
      // 更新逻辑
    });
    
    await db.workouts.update(id, {
      workout_exercises: updatedExercises
    });
  });
}

此外，对于 Svelte 的响应式更新，更好的做法是：

1. 避免在 $effect 中直接执行数据库操作
2. 改为在用户明确的动作(如点击事件)中触发更新
3. 或者使用防抖机制控制更新频率

最佳实践建议

1. 始终使用事务：对于涉及先读取后写入的操作，应该使用事务包装，确保操作的原子性。

2. 谨慎使用响应式更新：在响应式框架中，自动触发的副作用要特别注意竞态条件和性能问题。

3. 考虑批量更新：对于频繁的细粒度更新，可以考虑累积变化后一次性提交。

4. 添加错误处理：事务操作应该包含适当的错误处理和回滚机制。

5. 性能优化：对于大型嵌套对象，考虑使用 Dexie 的局部更新语法(如 'workout_exercises.0.sets')来减少传输数据量。

通过遵循这些原则，可以确保 Dexie.js 在复杂应用中的稳定性和数据一致性。