Vue中IndexedDB执行transaction报错：找不到指定对象存储

错误原因 #

出现DOMException: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.错误的核心原因是：浏览器中已存在版本号为1的OfflineDb数据库，但该数据库未创建posts对象存储。

你的openDB调用指定的版本号是1，当数据库已存在且版本号与当前指定版本一致时，upgradeDb回调不会执行，导致posts存储从未被创建，后续调用transaction('posts')自然找不到对应的对象存储。

解决方法 #

方法1：升级数据库版本号 #

将openDB的版本号从1改为更高数值（比如2），强制触发升级回调，确保posts存储被创建：

const dbPromise = () => {
  if (!('indexedDB' in window)) {
    throw new Error('Browser does not support IndexedDB')
  }
  // 版本号从1改为2
  return openDB('OfflineDb', 2, upgradeDb => {
    if (!upgradeDb.objectStoreNames.contains('posts')) {
      upgradeDb.createObjectStore('posts')
    }
  })
}

方法2：清除旧数据库 #

手动删除浏览器中已有的OfflineDb数据库：

1. 打开浏览器开发者工具（F12）
2. 切换到Application标签页
3. 在左侧找到IndexedDB，展开后选中OfflineDb
4. 右键选择Delete Database，刷新页面后重新执行代码

额外优化建议 #

创建对象存储时建议指定主键（比如用帖子的id作为主键），让数据存储和查询更规范：

upgradeDb.createObjectStore('posts', { keyPath: 'id' })

另外，你当前用store.put(datas, storeName)把所有帖子数据存在键为posts的单一条目里，如果需要存储多条独立帖子，建议循环插入每条数据，或者调整存储结构。

内容的提问来源于stack exchange，提问作者Ömer Faruk Demirel