Vue3 Ionic项目中全局注册CordovaSQLiteDriver驱动的Ionic Storage方法

方案一：封装独立模块+异步启动Vue应用 #

这种方式能确保Storage实例初始化完成后，再将其注入全局，让组件、Pinia都能直接调用。

1. 创建Storage封装文件
   新建src/utils/storage.ts，把初始化逻辑封装成一个自执行异步函数，导出初始化完成后的Promise：

import { Storage } from '@ionic/storage';
import * as Drivers from '@ionic/storage/drivers';
import { CordovaSQLiteDriver } from '@ionic/storage/sqlite';

// 仅初始化一次Storage实例
export const storagePromise = (async () => {
  const store = new Storage({
    name: 'localDb',
    driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage],
  });
  await store.defineDriver(CordovaSQLiteDriver);
  await store.create();
  return store;
})();

2. 修改main.ts异步启动应用
   用异步函数包裹应用启动逻辑，合法使用await等待Storage初始化，再将实例注入全局：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { storagePromise } from './utils/storage';

(async () => {
  const storage = await storagePromise;
  const app = createApp(App);
  const pinia = createPinia();

  // 方式1：挂载到Vue全局属性，组件中可通过this.$storage访问（需配置TS类型提示）
  app.config.globalProperties.$storage = storage;

  // 方式2：添加Pinia插件，让所有Pinia Store直接访问storage
  pinia.use(() => ({ storage }));

  app.use(pinia);
  app.mount('#app');
})();

3. 配置TS类型提示（可选）
   在src/env.d.ts中添加全局属性类型声明，让TS识别$storage：

import type { Storage } from '@ionic/storage';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $storage: Storage;
  }
}

方案二：不阻塞应用启动（按需等待） #

如果不想让应用等待Storage初始化再启动，可以在需要使用的地方直接等待storagePromise：

• Vue组件中使用：

<script setup lang="ts">
import { storagePromise } from '@/utils/storage';

const storage = await storagePromise;
// 调用Storage方法，比如 storage.get('user_token')
</script>

• Pinia Store中使用：

import { defineStore } from 'pinia';
import { storagePromise } from '@/utils/storage';

export const useUserStore = defineStore('user', {
  actions: {
    async loadUserInfo() {
      const storage = await storagePromise;
      return await storage.get('user_info');
    }
  }
});

关键说明 #

• 封装成Promise模块的好处是，无论在哪个地方调用，都只会初始化一次Storage实例，避免重复创建。
• Pinia插件方式能让所有Store实例直接拿到Storage，无需重复导入模块。

内容的提问来源于stack exchange，提问作者Just Me