关于vue中使用indexDB的总结

偏执的太偏执、 2022-09-05 00:24 551阅读 0赞

老规矩，先挂官网链接  
[https://www.npmjs.com/package/idb-js][https_www.npmjs.com_package_idb-js]

关于indexDB 是什么，用到什么地方我就不再解释，百度多得很，只说我在使用的过程中的一些问题

官网解释：  
![在这里插入图片描述][fef383e787064b08a960d069e7691a2d.png]

## 引入及简单使用 ##

**安装：**

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)
          }
        } 
      })
    })

其他使用方法同理，当然后续有时间完全可以二次封装。

[https_www.npmjs.com_package_idb-js]: https://www.npmjs.com/package/idb-js
[fef383e787064b08a960d069e7691a2d.png]: /images/20220829/e363d8cf7cb74198bc22a6df9ec57fba.png