[TOC] > [参考](https://dexie.org/) ## 概述 - IndexedDB 的包装，通过简单的语法，可以更快地进行代码开发。 - 支持 vue，React 等 - 支持 TS - 支持 ES6 的导入 ## 实例 ### demo ``` /* |----------------------------| | Declare your database | |----------------------------| */ const db = new Dexie('MyDatabase'); // Declare tables, IDs and indexes db.version(1).stores({ friends: '++id, name, age' }); /* |-----------------------| | Then run some queries | |-----------------------| */ // Find some old friends const oldFriends = await db.friends .where('age').above(75) .toArray(); // or make a new one await db.friends.add({ name: 'Camilla', age: 25, street: 'East 13:th Street', picture: await getBlob('camilla.png') }); ``` ### VUE ``` <!-- FriendAdder.vue --> <template> <fieldset> <legend>Add new friend</legend> <label> Name: <input v-model="friendName" type="text" /> </label> <br /> <label> Age: <input v-model="friendAge" type="number" /> </label> <br /> <button @click="addFriend">Add Friend</button> <p>{{ status }}</p> </fieldset> </template> <script> import { db } from '../db'; export default { name: 'FriendAdder', data: () => { return { status: '', friendName: '', friendAge: 21, }; }, methods: { async addFriend() { try { // Add the new friend! const id = await db.friends.add({ name: this.friendName, age: this.friendAge, }); this.status = `Friend ${this.friendName} successfully added. Got id ${id}`; // Reset form: this.friendName = ''; this.friendAge = defaultAge; } catch (error) { this.status = `Failed to add ${friendName}: ${error}`; } }, }, }; </script> ```