前端数据存储：IndexedDB 与 Dexie.js 技术指南

组合式 API 封装

// src/composables/useUsers.js
import { ref } from 'vue';
import db from '@/utils/db';

export function useUsers() {
  const users = ref([]);
  const loading = ref(false);
  const error = ref(null);

  // 获取所有用户
  const fetchUsers = async () => {
    loading.value = true;
    try {
      users.value = await db.users.toArray();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  // 添加用户
  const addUser = async (userData) => {
    try {
      const id = await db.users.add(userData);
      await fetchUsers(); // 重新获取数据
      return id;
    } catch (err) {
      error.value = err.message;
      throw err;
    }
  };

  // 更新用户
  const updateUser = async (id, updates) => {
    try {
      await db.users.update(id, updates);
      await fetchUsers();
    } catch (err) {
      error.value = err.message;
      throw err;
    }
  };

  // 删除用户
  const deleteUser = async (id) => {
    try {
      await db.users.delete(id);
      await fetchUsers();
    } catch (err) {
      error.value = err.message;
      throw err;
    }
  };

  // 复杂查询：按年龄范围查询
  const getUsersByAgeRange = async (minAge, maxAge) => {
    try {
      return await db.users.where('age').between(minAge, maxAge).toArray();
    } catch (err) {
      error.value = err.message;
      throw err;
    }
  };

  return { users, loading, error, fetchUsers, addUser, updateUser, deleteUser, getUsersByAgeRange };
}

在组件中使用

<template>
  <div>
    <h2>用户列表</h2>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }}-{{ user.age }}岁 
          <button @click="deleteUser(user.id)">删除</button>
        </li>
      </ul>
    </div>
    <form @submit.prevent="addNewUser">
      <input v-model="newUser.name" placeholder="姓名" required>
      <input v-model.number="newUser.age" type="number" placeholder="年龄" required>
      <input v-model="newUser.email" type="email" placeholder="邮箱">
      <button type="submit">添加用户</button>
    </form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useUsers } from '@/composables/useUsers';

const { users, loading, error, fetchUsers, addUser, deleteUser } = useUsers();
const newUser = ref({ name: '', age: '', email: '' });

onMounted(() => {
  fetchUsers();
});

const addNewUser = async () => {
  try {
    await addUser(newUser.value);
    newUser.value = { name: '', age: '', email: '' };
  } catch (err) {
    console.error('添加用户失败:', err);
  }
};
</script>

实时查询（Live Query）

Dexie.js 提供了实时查询功能，当数据库数据变化时自动更新 UI：

// 使用实时查询
import { liveQuery } from 'dexie';
// 在 Vue3 中需要额外处理
import { from } from '@vueuse/rxjs';
import { useObservable } from '@vueuse/rxjs';

const users = useObservable(from(liveQuery(async () => {
  return await db.users.toArray();
})));

四、React 中使用 Dexie.js

安装依赖

npm install dexie dexie-react-hooks

数据库配置

// src/db.js
import Dexie from 'dexie';

class AppDatabase extends Dexie {
  constructor() {
    super('MyReactAppDB');
    this.version(1).stores({
      todos: '++id, title, completed, createdAt',
      users: '++id, name, email, age'
    });
    this.todos = this.table('todos');
    this.users = this.table('users');
  }
}

export const db = new AppDatabase();

自定义 Hook 封装

// src/hooks/useTodos.js
import { useState, useEffect } from 'react';
import { useLiveQuery } from 'dexie-react-hooks';
import { db } from '../db';

export function useTodos() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 使用 useLiveQuery 实现实时查询
  const todos = useLiveQuery(() => db.todos.toArray(), [], []);

  const addTodo = async (title) => {
    setLoading(true);
    try {
      await db.todos.add({ title, completed: false, createdAt: new Date() });
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const toggleTodo = async (id, completed) => {
    try {
      await db.todos.update(id, { completed });
    } catch (err) {
      setError(err.message);
    }
  };

  const deleteTodo = async (id) => {
    try {
      await db.todos.delete(id);
    } catch (err) {
      setError(err.message);
    }
  };

  const clearCompleted = async () => {
    try {
      await db.todos.where('completed').equals(true).delete();
    } catch (err) {
      setError(err.message);
    }
  };

  return { todos: todos || [], loading, error, addTodo, toggleTodo, deleteTodo, clearCompleted };
}

组件中使用

// src/components/TodoList.jsx
import React, { useState } from 'react';
import { useTodos } from '../hooks/useTodos';

function TodoList() {
  const { todos, loading, error, addTodo, toggleTodo, deleteTodo, clearCompleted } = useTodos();
  const [newTodoTitle, setNewTodoTitle] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newTodoTitle.trim()) {
      addTodo(newTodoTitle.trim());
      setNewTodoTitle('');
    }
  };

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误:{error}</div>;

  return (
    <div>
      <h2>待办事项</h2>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={newTodoTitle} 
          onChange={(e) => setNewTodoTitle(e.target.value)} 
          placeholder="添加新待办事项"
        />
        <button type="submit">添加</button>
      </form>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input 
              type="checkbox" 
              checked={todo.completed} 
              onChange={() => toggleTodo(todo.id, !todo.completed)}
            />
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.title}</span>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
      <button onClick={clearCompleted}>清除已完成</button>
    </div>
  );
}

export default TodoList;

复杂查询示例

// 范围查询：查询年龄在 20-30 岁之间的用户
const youngUsers = await db.users.where('age').between(20, 30).toArray();

// 多条件查询：查询特定类别且价格小于 200 的商品
const results = await db.items.where('category').equals('A').and(item => item.price < 200).toArray();

// 排序和分页
const paginatedResults = await db.items.orderBy('price').offset(10).limit(5).toArray(); // 跳过前 10 条，获取 5 条

五、最佳实践与性能优化

1. 合理设计索引

为高频查询字段创建索引，避免全表扫描：

db.version(1).stores({
  products: '++id, name, price, category, [category+price]'
});

2. 批量操作优化

使用批量操作 API 提高性能：

// 批量添加
await db.users.bulkAdd([
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 28 }
]);

// 批量更新
await db.users.bulkPut([
  { id: 1, name: 'Alice Smith', age: 26 },
  { id: 2, name: 'Bob Johnson', age: 31 }
]);

3. 事务优化

将相关操作放在同一事务中执行：

await db.transaction('rw', db.users, db.posts, async () => {
  const userId = await db.users.add({ name: 'John', age: 25 });
  await db.posts.add({ title: 'Hello World', content: '...', userId });
});

4. 错误处理

try {
  await db.users.add({ name: 'Alice', age: 25 });
} catch (error) {
  if (error.name === 'ConstraintError') {
    console.error('数据约束错误:', error.message);
  } else {
    console.error('未知错误:', error);
  }
}

5. 数据库版本升级

db.version(2).stores({
  users: '++id, name, age, email, city' // 新增 city 字段
});

db.version(3).upgrade((trans) => {
  return trans.table('users').toCollection().modify((user) => {
    // 为已有用户添加默认邮箱
    if (!user.email) {
      user.email = `${user.name.toLowerCase()}@example.com`;
    }
  });
});

六、总结

IndexedDB 与 Dexie.js 的组合为前端开发提供了强大的本地数据存储解决方案。IndexedDB 作为浏览器内置的 NoSQL 数据库，提供了大容量存储、异步操作和事务支持等核心能力；而 Dexie.js 通过极简的 API 设计，大幅降低了 IndexedDB 的使用门槛。

在 Vue3 和 React 中，通过合理的封装和 Hook 设计，可以实现响应式的数据管理，结合实时查询功能，能够构建出真正离线优先的 Web 应用。无论是简单的待办事项应用，还是复杂的企业级系统，IndexedDB + Dexie.js 都能提供可靠的数据存储方案。

适用场景总结：

• ✅ 需要离线功能的 PWA 应用
• ✅ 存储大量结构化数据（10MB 以上）
• ✅ 需要复杂查询和索引的场景
• ✅ 离线优先的数据同步应用
• ❌ 简单的键值对存储（推荐 localStorage）
• ❌ 临时会话数据（推荐 sessionStorage）