当前位置：首页 > VUE

vue实现sqlite的存储

2026-02-22 07:42:20VUE

Vue 中实现 SQLite 存储的方案

在 Vue 中直接操作 SQLite 数据库需要结合浏览器或 Node.js 环境的能力。以下是几种常见实现方式：

浏览器环境使用 Web SQL 或 SQL.js

Web SQL 是浏览器提供的 API（已废弃但仍被多数浏览器支持），SQL.js 是基于 WebAssembly 的 SQLite 移植方案。

Web SQL 示例

// 打开或创建数据库
const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)

// 创建表
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS logs (id unique, log)')
})

// 插入数据
db.transaction(function (tx) {
  tx.executeSql('INSERT INTO logs (id, log) VALUES (?, ?)', [1, 'Sample log'])
})

SQL.js 示例

vue实现sqlite的存储

import initSqlJs from 'sql.js'

const SQL = await initSqlJs()
const db = new SQL.Database()
db.run('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT)')
db.run('INSERT INTO test VALUES (?, ?)', [1, 'Alice'])

Electron 环境使用 SQLite3

在 Electron 应用中可直接使用 Node.js 的 SQLite3 模块。

安装依赖

npm install sqlite3

封装数据库操作

vue实现sqlite的存储

const sqlite3 = require('sqlite3').verbose()
const db = new sqlite3.Database('./mydb.sqlite')

db.serialize(() => {
  db.run('CREATE TABLE IF NOT EXISTS users (id INT, name TEXT)')
  db.run('INSERT INTO users VALUES (?, ?)', [1, 'John'])
})

// 在 Vue 组件中使用
export default {
  methods: {
    fetchUsers() {
      db.all('SELECT * FROM users', (err, rows) => {
        console.log(rows)
      })
    }
  }
}

使用 Capacitor/Cordova 插件

混合应用可通过插件访问设备原生 SQLite 功能。

Capacitor 示例

npm install @capacitor-community/sqlite

Vue 中使用

import { SQLite, SQLiteObject } from '@capacitor-community/sqlite'

const openDB = async () => {
  const db = await SQLite.createConnection('mydb')
  await db.open()
  await db.execute('CREATE TABLE IF NOT EXISTS notes(text TEXT)')
  return db
}