Интеграция Capacitor SQLite с Vue 3 и JavaScript

Capacitor JS - это современный инструмент для создания нативных приложений на Android и iOS с помощью веб-технологий. Он является более лёгкой и гибкой альтернативой Cordova. Плагин CapacitorSQLite позволяет работать с базами данных SQLite прямо из вашего Vue 3 приложения. В этой статье мы разберём, как настроить плагин, создать базу данных и выполнять простые запросы.

Что такое CapacitorSQLite и зачем он нужен

CapacitorSQLite - это официальный плагин для работы с SQLite в среде Capacitor. Он даёт возможность хранить структурированные данные локально на устройстве, что особенно полезно для офлайн-приложений, кэширования или хранения пользовательских настроек. В отличие от простого localStorage, SQLite поддерживает сложные запросы, индексы и транзакции.

Установка и настройка плагина

Для начала установите плагин через npm:

npm install @capacitor-community/sqlite

Затем синхронизируйте Capacitor с вашим проектом:

npx cap sync

После этого добавьте плагин в основной файл вашего приложения (например, main.js):

import { CapacitorSQLite } from '@capacitor-community/sqlite';

Плагин автоматически подключается к нативному модулю на устройстве, поэтому дополнительных настроек в Android/iOS не требуется.

Создание базы данных и таблицы

В вашем Vue-компоненте используйте методы плагина для создания базы. Рассмотрим пример инициализации базы данных и таблицы с полями id, name, value:

import { CapacitorSQLite } from '@capacitor-community/sqlite';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const dbName = 'my_database';
    const db = ref(null);

    onMounted(async () => {
      const sqlite = new CapacitorSQLite();
      await sqlite.createConnection({ database: dbName });
      db.value = await sqlite.getConnection({ database: dbName });
      
      // Создаём таблицу
      const createTableQuery = `CREATE TABLE IF NOT EXISTS test_table (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT NOT NULL,
        value TEXT
      );`;
      await db.value.execute({ statement: createTableQuery });
      console.log('Таблица создана');
    });

    return { db };
  }
};

Обратите внимание: база данных создаётся автоматически при первом обращении. Папка public/assets/databases/ не требуется - база хранится во внутреннем хранилище приложения.

Выполнение запросов: вставка и чтение данных

После создания таблицы можно вставлять данные:

const insertQuery = `INSERT INTO test_table (name, value) VALUES ('example', 'test_value');`;
await db.value.execute({ statement: insertQuery });

Для чтения данных используйте метод query:

const result = await db.value.query({ statement: 'SELECT * FROM test_table' });
console.log(result.values); // массив объектов с полями id, name, value

Плагин возвращает результат в виде объекта с полем values, содержащим массив строк.

Работа с существующей базой данных

Если у вас есть готовая база данных (например, в папке public/assets/databases/), её можно импортировать с помощью метода importDatabase:

await sqlite.importDatabase({ database: dbName, from: 'assets/databases/my_database.db' });

Убедитесь, что файл базы данных находится в правильной директории и имеет расширение .db. После импорта вы можете подключаться к ней как обычно.

Типичные ошибки и их решение

• Плагин не найден: проверьте, что вы выполнили npx cap sync и пересобрали проект.
• Ошибка подключения: убедитесь, что вы используете createConnection перед getConnection.
• Запросы не выполняются: используйте await для всех асинхронных методов, иначе промис не будет разрешён.
• База данных не сохраняется: при переустановке приложения база удаляется. Для постоянного хранения используйте createConnection с тем же именем.

Заключение

CapacitorSQLite - мощный и простой в использовании плагин для работы с SQLite в Vue 3. Следуя приведённым шагам, вы легко интегрируете локальную базу данных в своё нативное приложение. Экспериментируйте с запросами и используйте транзакции для повышения производительности.