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

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