vue3 better-sqlite3

### 集成和使用 `better-sqlite3` 库于 Vue 3 项目 #### 安装依赖项 为了在 Vue 3 中集成并使用 `better-sqlite3`，首先需要安装此库以及任何必要的构建工具。由于这是一个 Node.js 的原生模块，在某些环境中可能还需要额外的编译器支持。 ```bash npm install better-sqlite3 ``` 对于 Windows 用户来说，如果遇到安装问题，则需确保已安装 Visual C++ Build Tools 或者其他所需的开发环境组件来完成本地模块的编译过程[^1]。 #### 创建数据库连接服务 考虑到前端应用通常不会直接操作文件系统的数据库（这涉及到安全性和跨平台兼容性等问题），这里假设存在一种场景——通过 Electron 构建桌面应用程序，其中可以直接访问本地资源。因此可以在项目的 src/services 文件夹下创建一个新的 JavaScript 文件 dbService.js 来管理所有的数据库交互逻辑： ```javascript// src/services/dbService.js import { open } from 'better-sqlite3'; const databasePath = ':memory:'; // 使用内存中的临时数据库进行测试 let db; try { db = open(databasePath); } catch (error) { console.error('Failed to connect to SQLite Database', error); } export default db; ``` 这段代码尝试打开指定路径下的 SQLite 数据库实例；当设置为 ":memory:" 时表示创建一个仅存在于运行期间的虚拟存储空间用于快速原型设计或单元测试目的[^3]。 #### 设计数据模型与 CRUD 方法 接下来定义一些简单的表结构及相应的增删改查函数封装到 service 层中以便后续调用： ```typescript// src/models/userModel.ts interface User { id?: number; name: string; email: string; } class UserModel { private static TABLE_NAME = 'users'; public async createTable() : Promise<void> { const sql = ` CREATE TABLE IF NOT EXISTS ${UserModel.TABLE_NAME} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT UNIQUE NOT NULL ); `; await db.prepare(sql).run(); } public insert(user: Omit<User, "id">): void { const stmt = db.prepare(` INSERT INTO users(name, email) VALUES (@name, @email) `); stmt.run({ ...user }); } } ``` 上述 TypeScript 类实现了针对用户实体的基本持久化功能，并利用了 `better-sqlite3` 提供的方法来进行 SQL 执行而不必手动拼接字符串。 请注意以上例子简化了很多细节处理部分比如错误捕捉机制等实际生产环境下应该更加严谨地对待这些问题。 #### 将其应用于 Vuex Store 或 Composition API 组件内 最后一步就是把之前准备好的业务逻辑引入至状态管理层或是组合式API风格的视图层当中去实现完整的读写流程控制。下面给出了一种基于 Pinia 插件的方式作为示范： ```typescript// store/index.ts import { defineStore } from 'pinia'; import userModel from '../models/userModel'; export const useUserStore = defineStore({ id: 'user', state: () => ({ list: [] as Array<User>, }), actions: { addUser(newUser: Pick<User, "name" | "email">){ try{ userModel.insert(newUser); this.list.push({...newUser}); }catch(e){ throw new Error(`Add user failed:${e.message}`); } }, fetchAllUsers(){ // 实现查询所有用户的逻辑... } } }) ``` 这样就完成了从初始化配置直到具体使用的整个链条搭建工作。当然这只是其中一个可行方案而已，开发者完全可以根据自己团队的技术栈偏好做出适当调整优化。