indexedDB在vue3中的全局使用

要在Vue3中全局使用indexedDB，可以使用Vue3的provide和inject API。以下是一个示例：

1. 在main.js中创建indexedDB实例并提供给所有组件：

import { createApp } from 'vue';
import { openDB } from 'idb';
import App from './App.vue';

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

createApp(App)
  .provide('dbPromise', dbPromise)
  .mount('#app');

在上面的代码中，我们创建了一个名为“dbPromise”的indexedDB实例，并将其提供给所有组件。

2. 在组件中使用提供的indexedDB实例：

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

export default {
  setup() {
    const dbPromise = inject('dbPromise');

    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,
    };
  },
};

在上面的代码中，我们使用inject API从全局提供的“dbPromise”中获取indexedDB实例，并将其用于读取和保存数据。

通过这种方式，我们可以在整个应用程序中重用相同的indexedDB实例，并避免在每个组件中都创建新的实例。