vue3 sqlite3连接

### 在 Vue.js 3 中连接 SQLite3 数据库

为了在 Vue.js 3 项目中集成并操作 SQLite3 数据库，可以采用 Sql.js 库来实现这一功能。Sql.js 是一个纯 JavaScript 实现的 SQLite 数据库引擎，可以在浏览器端运行。

#### 安装依赖项
首先，在 Vue.js 3 项目的根目录下安装 `sql.js`：

npm install sql.js

#### 创建 SQLite 数据库实例
接下来，在 Vue 组件内部初始化 SQLite 并创建数据库实例[^1]：

import { ref, onMounted } from 'vue';
import initSqlJs from 'sql-wasm';

export default {
  setup() {
    let db;
    
    const loadDatabase = async () => {
      try {
        const SQL = await initSqlJs();
        
        // 创建一个新的内存中的 SQLite 数据库
        db = new SQL.Database();

        console.log('SQLite database initialized');
      } catch (error) {
        console.error('Failed to initialize SQLite:', error);
      }
    };

    onMounted(() => {
      loadDatabase();
    });

    return {};
  },
};

这段代码展示了如何利用 `initSqlJs()` 函数加载 WebAssembly 版本的 Sql.js 来启动 SQLite 数据库环境，并将其存储于组件的状态变量 `db` 中以便后续调用。

#### 执行 SQL 查询
一旦成功建立了与 SQLite 的连接，则可以通过执行 SQL 命令来进行数据的操作。下面是一个简单的例子，用于展示如何向表内插入记录以及查询所有条目：

const executeQuery = () => {
  if (!db) {
    alert('Please wait until the database is loaded.');
    return;
  }

  // 创建表格结构
  db.run(`CREATE TABLE IF NOT EXISTS users (
            id INTEGER PRIMARY KEY,
            name TEXT NOT NULL)`);

  // 插入新用户
  db.run("INSERT INTO users(name) VALUES (?)", ['Alice']);

  // 获取全部用户的列表
  const result = db.exec("SELECT * FROM users");

  console.table(result.map(row => row.values));
};

// 将此方法绑定到按钮点击事件或其他触发器上...

以上就是关于怎样在一个基于 Vue.js 3 构建的应用程序里嵌入 SQLite3 支持的大致流程介绍。值得注意的是，由于 Sql.js 主要在客户端侧工作，因此对于大型应用来说可能不是最佳选择；但对于小型离线应用程序而言却是非常合适的解决方案之一。