vue 怎么使用IndexedDB

在 Vue 中使用 IndexedDB，可以按照以下步骤进行操作：

1. 打开数据库：使用 `indexedDB.open()` 方法打开数据库，如果数据库不存在，则会创建一个新的数据库。在打开数据库时，可以指定数据库名称、版本号和需要创建的对象存储空间。

let request = indexedDB.open('my-db', 1)

request.onerror = function(event) {
  console.error('打开数据库出错：', event.target.errorCode)
}

request.onsuccess = function(event) {
  let db = event.target.result
  console.log('打开数据库成功：', db)
}

2. 创建对象存储空间：在打开数据库成功后，可以使用 `createObjectStore()` 方法创建一个新的对象存储空间，用于存储数据。在创建对象存储空间时，需要指定对象存储空间的名称和键名。

request.onupgradeneeded = function(event) {
  let db = event.target.result
  console.log('数据库升级成功：', db)
  
  let store = db.createObjectStore('my-store', { keyPath: 'id' })
  console.log('对象存储空间创建成功：', store)
}

3. 存储数据：在创建对象存储空间后，就可以使用 `add()` 或 `put()` 方法将数据存储到对象存储空间中。其中，`add()` 方法用于向对象存储空间添加新数据，如果数据已经存在，则会抛出错误；`put()` 方法用于向对象存储空间添加新数据，如果数据已经存在，则会覆盖原有数据。

let transaction = db.transaction(['my-store'], 'readwrite')
let store = transaction.objectStore('my-store')

let data = { id: 1, name: '张三' }
let req = store.add(data)

req.onsuccess = function(event) {
  console.log('数据存储成功：', data)
}

req.onerror = function(event) {
  console.error('数据存储失败：', event.target.errorCode)
}

4. 查询数据：使用 `get()` 方法可以根据键名查询对象存储空间中的数据。

let transaction = db.transaction(['my-store'], 'readwrite')
let store = transaction.objectStore('my-store')

let req = store.get(1)

req.onsuccess = function(event) {
  let data = event.target.result
  console.log('数据查询成功：', data)
}

req.onerror = function(event) {
  console.error('数据查询失败：', event.target.errorCode)
}

5. 删除数据：使用 `delete()` 方法可以根据键名删除对象存储空间中的数据。

let transaction = db.transaction(['my-store'], 'readwrite')
let store = transaction.objectStore('my-store')

let req = store.delete(1)

req.onsuccess = function(event) {
  console.log('数据删除成功')
}

req.onerror = function(event) {
  console.error('数据删除失败：', event.target.errorCode)
}

以上就是在 Vue 中使用 IndexedDB 的基本操作步骤。需要注意的是，IndexedDB 是异步操作，需要使用回调函数或 Promise 处理异步操作结果。