关于vue中使用indexDB的总结
老规矩，先挂官网链接
https://www.npmjs.com/package/idb-js
关于indexDB 是什么，用到什么地方我就不再解释，百度多得很，只说我在使用的过程中的一些问题
官网解释：
引入及简单使用
安装：
npm install idb-js --save
使用：
- 第一步：引入db
import Idb from 'idb-js' // 引入Idb
- 第二步：引入数据库配置
import db_student_config from './db_student_config'
- 第三步：载入配置，数据库开启成功拿到数据库实例进行操作
Idb(db_student_config).then(student_db => {...})
数据库实例 db 方法
（拣选几条常用）
- close_db - 关闭数据库
- delete_db - 删除数据库
- clear_table - 清空某张表的数据
- insert - 添加单条或者多条数据
- query - 查询匹配到的数据
- queryAll - 查询某张表的所有数据
- delete - 删除数据
- update - 修改数据
官网举例
数据库配置
// in db_student_config.js
export default {
dbName: "student", // *数据库名称
version: 1, // 数据库版本号（默认为当前时间戳）
tables: [ // *数据库的表，即ObjectStore
{
tableName: "grade", // *表名
option: { keyPath: "id" }, // 表配置，即ObjectStore配置，此处指明主键为id
indexs: [ // 数据库索引（建议加上索引）
{
key: "id", // *索引名
option:{ // 索引配置，此处表示该字段不允许重复
unique: true
}
},
{
key: "name"
},
{
key: "score"
}
]
},
{
tableName: "info", // *表名 另外一张表，同理
option: { keyPath: "id" },
indexs: [
{
key: "id",
option:{
unique: true
}
},
{
key: "name"
},
{
key: "age"
},
{
key: "sex"
}
]
}
]
};
使用：
// 载入数据配置，数据库开启成功后会拿到db来对数据库进行操作
import Idb from 'idb-js' // 引入Idb
import db_student_config from './db_student_config' // 引入数据库配置
Idb(db_student_config).then(student_db => { // 载入配置，数据库开启成功后返回该数据库实例
/**
* @method close_db 关闭此数据库
* */
student_db.close_db();
/**
* @method delete_db 删除此数据库
* */
student_db.delete_db();
/**
* @method 增加单条数据
* */
student_db.insert({
tableName: "grade",
data: {
id: 1,
score: 98,
name: "小明"
},
success: () => console.log("添加成功")
});
/**
* @method 增加多条数据
* */
student_db.insert({
tableName: "grade",
data: [{
id: 1,
score: 98,
name: "小明"
},{
id: 2,
score: 99,
name: "小方"
}],
success: () => console.log("添加成功")
});
/**
* @method 查询数据（游标）
* */
student_db.query({
tableName: "grade",
condition: (item)=> item.score == 100,
success: r => {
console.log(r);
}
});
/**
* @method 修改数据
* */
student_db.update({
tableName: "grade",
condition:item => item.name == '小明',
handle: r => {
r.score = 80;
},
success: r => {
console.log("修改成功", r);
}
});
/**
* @method 删除数据
* */
student_db.delete({
tableName: "grade",
condition: (item)=> item.name == '小明',
success: (res) => {
console.log("删除成功");
}
});
/**
* @method 查询某张表的所有数据
* */
student_db.queryAll({
tableName: "grade",
success: (res) => {
console.log(res)
}
});
/**
* @method 根据主键查询某条数据
* */
student_db.query_by_primaryKey({
tableName:'grade',
target:1,
success:(res)=>{console.log(res)}
})
/**
* @method 根据索引查询某条数据
* */
student_db.query_by_index({
tableName:'grade',
indexName:'name',
target:'小明',
success:(res)=>{console.log(res)}
})
/**
* @method 清空某张表的数据
* */
student_db.clear_table({
tableName:'grade'
})
/**
* @method 通过主键删除某条数据
* */
student_db.delete_by_primaryKey({
tableName:'grade',
target:1,
success:()=>console.log('删除成功')
})
/**
* @method 通过主键更改某条数据
* */
student_db.update_by_primaryKey({
tableName: "grade",
target: 1,
handle: val => (val.score = 101),
success: res => {
console.log(res);
}
});
},err => {
console.log(err)
});
自用问题总结
自用配置文件：
export default {
dbName: 'peopleInfo',
verison: 1,
tables: [
{
tableName: 'info', // 表名
option: {
keyPath: 'id'
}, // 表配置
indexs: [
{
key: 'id',
options: {
unique: true
}
},
{
key: 'colCard',
options: {
unique: true
}
},
{
key: 'colName'
},
{
key: 'colPhone'
},
{
key: 'type'
}
]
}
]
}
- 问题：关于option: { keyPath: ‘id’ } 报错问题
这个也算是个遗留问题，刚开始看文档说明是主键就可以，根据数据库知识，主键叫啥名字都可以，所以我写成了 colCard 的字段，也就是身份证号，配置文件中就写成了 { keyPath: ‘colCard’ }，但是一直报错。
后面没办法就还是写成了 id ，并且把数据序号 index 存成了 id。就成功了，置于为啥报错，这是不是最简洁的修改方式，欢迎大家跟我交流。
- 问题： 关于全局使用 idb 的问题
我们看到官网只是引入了，直接使用，根据官网代码我们看到 idb 是个异步的东西，直觉类似于 axios。
此时我们想要全局使用，就可以参考 axios 的全局使用方式，进行全局封装。
但是为了方便我没有封装，只是简单全局引入了一下，使用 then 进行处理结果。
import Idb from 'idb-js'
Vue.prototype.$peopleDB = Idb(peopleInfoDB) // 挂载全局
然后我们在页面中直接使用：
const _vm = this
this.$peopleDB.then(data => {
data.queryAll({
tableName: 'info',
success: result => {
if (result.length !== 0 && result.length == _vm.raatio) {
_vm.list = result
_vm.$store.dispatch("people/setPeopleInfo", result)
}
}
})
})
其他使用方法同理，当然后续有时间完全可以二次封装。