使用 Vue3 和 Vite 创建 SQLite 数据库并进行数据存储

// 安装依赖
// npm install @vueuse/core sqlite
 
// main.js
import { ref } from 'vue'
import { openDB, DBSchema, deleteDB, wrap } from 'sqlite'
 
// 定义数据库模式
const schema = wrap(new DBSchema())
  .version(1)
  .create('messages', (table) => {
    table.int('id').primaryKey().autoIncrement()
    table.text('message')
  })
 
// 打开或创建数据库
const db = ref(null)
const openDatabase = async () => {
  db.value = await openDB('my-database.db', 1, schema)
}
 
// 插入数据
const insertMessage = async (message) => {
  if (db.value) {
    const tx = db.value.transaction('messages', 'readwrite')
    const store = tx.objectStore('messages')
    const addRequest = store.add({ message })
    await tx.done
    console.log('Message inserted', addRequest.result)
  }
}
 
// 删除数据库
const deleteDatabase = async () => {
  await deleteDB('my-database.db')
  console.log('Database deleted')
}
 
// 在组件中使用
// 在组件中调用 openDatabase, insertMessage, 或 deleteDatabase 方法

这段代码展示了如何在 Vue 3 应用中使用 Vite 创建和管理 SQLite 数据库。它包括打开数据库、定义模式、插入数据和删除数据库的操作。通过这个例子，开发者可以学习如何在前端应用中使用 SQLite 进行数据的本地存储。