indexedDB在vue3中的使用

在Vue3中使用indexedDB可以通过以下步骤：

1. 安装indexedDB库

可以使用npm或yarn安装idb库，该库提供了对indexedDB的简单封装：

npm install idb

或

yarn add idb

2. 创建indexedDB数据库

在Vue3中，可以在需要使用indexedDB的组件中创建数据库。可以使用以下代码：

import { openDB } from 'idb';

const dbPromise = openDB('my-db', 1, {
  upgrade(db) {
    db.createObjectStore('my-store');
  },
});

这将创建一个名为'my-db'的数据库，其中包含一个名为'my-store'的对象存储。如果数据库已经存在，则会打开现有数据库。

3. 在组件中使用indexedDB

在Vue3中，可以通过以下方式在组件中使用indexedDB：

import { reactive } from 'vue';
import { get, set } from 'idb-keyval';

export default {
  setup() {
    const state = reactive({
      data: null,
    });

    async function loadData() {
      const data = await get('my-key', dbPromise);
      state.data = data;
    }

    async function saveData() {
      await set('my-key', state.data, dbPromise);
    }

    return {
      state,
      loadData,
      saveData,
    };
  },
};

在上面的代码中，使用了idb-keyval库来简化indexedDB的读写操作。通过在组件中使用reactive，可以轻松地将indexedDB中的数据绑定到组件的状态。在loadData和saveData方法中，使用get和set方法从indexedDB中读取和保存数据。

注意：在Vue3中使用indexedDB需要手动处理异步操作，例如使用async和await关键字。